리액트 네이티브 앱 개발 #4-4 Expo with TypeScript 프로젝트

React Native Expo with TypeScript 도 경험해 보기

요구조건:
React Native 하이브리드 앱
인트로, 메인화면, 로그인, Footer 는 네이티브 영역
Footer 메뉴에 MyPage  버튼을 누르면 웹(WebView) 영역에 홈펭지 출력
Android TargetSDK 34 지원
React Native Expo
TypeScript 로 소스코드 생성

Expo 최신 command 사용: expo start --> npx expo start

 
1. Expo CLI 설치

설치하지 않았으면 ...

> npm install -g expo-cli

 

2. Expo 를 사용해 TypeScript 프로젝트 생성

 

> npx create-expo-app myApp --template

√ Choose a template: » Blank (TypeScript)

 

devDependencies 에 TypeScript 추가

> npm install --save-dev typescript @types/react @types/react-native

added 2 packages, and audited 1101 packages in 4s

132 packages are looking for funding
  run `npm fund` for details

3 moderate severity vulnerabilities

 

3. 추가 패키지 설치

웹 뷰용 react-native-webview 설치

> npx expo install react-native-webview

Installing 1 SDK 51.0.0 compatible native module using npm.
> npm install

added 2 packages, and audited 1103 packages in 3s

132 packages are looking for funding
  run `npm fund` for details

3 moderate severity vulnerabilities

 

4. 프로젝트 구성

프로젝트 폴더 생성

/src
  /assets       # 정적 파일
  /components   # 네이티브 UI 컴포넌트
  /screens      # 화면별 코드
  /navigation   # 네비게이션 설정
  App.tsx       # 메인 파일
  tsconfig.json # TypeScript 설정

 

5. react-native-screens 4.0.0 버전 재 설치

의존성 충돌 해결용

앞으로 사용할 @react-navigation/bottom-tabs는 react-native-screens 가 4.x 이상이 필요 합니다.

> npm install react-native-screens@latest

added 9 packages, and audited 1112 packages in 5s

132 packages are looking for funding
  run `npm fund` for details

3 moderate severity vulnerabilities

 

6. Footer 와 Navigation 용 추가 설치

 

위 react-native-screens 4.x 설치해야 의존성 출돌나지 않음

> npm install @react-navigation/native@latest @react-navigation/bottom-tabs@latest react-native-vector-icons@latest

added 23 packages, and audited 1135 packages in 9s

133 packages are looking for funding
  run `npm fund` for details

3 moderate severity vulnerabilities

위 설치는 의존성 출돌로 진행 했으며, 아래 추가 설치 진행

> npx expo install  react-native-safe-area-context react-native-gesture-handler react-native-reanimated 

› Installing 3 SDK 51.0.0 compatible native modules using npm
> npm install

up to date, audited 1135 packages in 2s

133 packages are looking for funding
  run `npm fund` for details

3 moderate severity vulnerabilities

 

7. 소스코드

App.tsx

import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import Intro from './screens/Intro';
import Home from './screens/Home';
import MyPage from './screens/MyPage';

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        <Tab.Screen name="Intro" component={Intro} />
        <Tab.Screen name="Home" component={Home} />
        <Tab.Screen name="MyPage" component={MyPage} />
      </Tab.Navigator>
    </NavigationContainer>
  );
}

 

인트로와 홈 화면

/screens/Intro.tsx

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function Intro() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Welcome to the Hybrid App!</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  text: { fontSize: 18 },
});

/screens/Home.tsx

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function Home() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>This is the Home Screen.</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
  text: { fontSize: 18 },
});

WebView 설정파일
/screens/MyPage.tsx

import React from 'react';
import { View, StyleSheet } from 'react-native';
import { WebView } from 'react-native-webview';

export default function MyPage() {
  return (
    <View style={styles.container}>
      <WebView source={{ uri: 'https://google.com' }} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1 },
});

Footer 스타일링
/navigation/FooterNavigator.tsx

<Tab.Navigator
  screenOptions={{
    headerShown: false,
    tabBarStyle: { backgroundColor: '#f8f8f8', borderTopColor: '#ccc', borderTopWidth: 1 },
    tabBarActiveTintColor: '#007aff',
    tabBarInactiveTintColor: '#8e8e93',
  }}
>
  {/* Tab Screens */}
</Tab.Navigator>

 

@react-navigation/stack 설치시 종속성 경고!

import { createStackNavigator } from '@react-navigation/stack';

대안으로 React Navigation의 호환성을 유지하기 위해, @react-navigation/stack과 관련 패키지를 설치 후 정상 확인! 

> npm install @react-navigation/stack@latest react-native-screens@latest

added 1 package, changed 1 package, and audited 1136 packages in 5s

133 packages are looking for funding
  run `npm fund` for details

3 moderate severity vulnerabilities

** 소스코드는 /src/ 아래에 취합할 것임... 기둘리~

 

8. 의존성, 버전 이슈 로그

Starting Metro Bundler The following packages should be updated for best compatibility with the installed expo version:   expo@51.0.38 - expected version: ~51.0.39 Your project may not work correctly until you install the expected versions of the packages.
실행은 되지만 ... 잡고 진행 함 

8-1. Expo 패키지 버전이 CLI 와 충돌

expo@51.0.38이 설치되어 있지만, Expo CLI가 ~51.0.39 버전을 요구하고 있습니다.프로젝트의 package.json 파일에 정의된 Expo 관련 패키지 버전이 CLI와 동기화되지 않은 상태입니다.

8-2. Expo 패키지 업그레이드 실행

> npx expo install expo
> npx expo-doctor (이것도 변경됨, 전에는 expo-cli doctor 입니다)

8-3. 기타 명령어

$ npx expo start (실행) $ npx expo-doctor (local CLI 용) $ npx expo install expo (Expo 패키지 동기화 업그레이드) $ npx expo upgrade (권장 버전으로 설치) $ npm outdated (설치 완료 후 종속성 확인) $ npm cache clean --force (npm 캐시 정리) $ npx expo start -c (Expo 캐시 정리)

8-4. 또 다른 경고 메세지

React Native의 일부 패키지가 @babel/preset-env라는 패키지를 의존하고 있지만, 현재 프로젝트에 설치되어 있지 않다
warning "react-native > @react-native/codegen@0.74.87" has unmet peer dependency "@babel/preset-env@^7.1.6". warning "react-native > @react-native/codegen > jscodeshift@0.14.0" has unmet peer dependency "@babel/preset-env@^7.1.6".

8-5. @babel/preset-env 설치

> npm install @babel/preset-env --save-dev
이후 메세지 사라짐 확인!! 두둥