[RN] React Navigation Setting

리액트 네이티브로 간단한 앱을 만들면서 겪었던 일을 기록합니다.

리액트 네이티브 버전 :  "react-native": "0.69.2"

- 리액트 내비게이션 설치

https://reactnavigation.org/docs/getting-started

https://reactnavigation.org/docs/getting-started/

- 공홈을 참조해서 설치한다.

- 나는 설치했더니 "@react-navigation/native": "^6.0.11" 버전이었다.

- 리액트 네이티브는(iOS) 라이브러리 설치 후 ios 폴더로 이동하여 "pod install"을 해줘야 한다.

- 실행을 했더니 에러 던진다.

"@react-native-community/masked-view": "^0.1.11"

"react-native-gesture-handler": "^2.5.0",

"react-native-reanimated": "^2.9.1",

"react-native-safe-area-context": "^4.3.1",

"react-native-screens": "^3.15.0"

- 리액트 내비게이션 5.x 이상부터는 위 다섯 개 라이브러리를 추가로 설치해줘야 한다고 한다.

- 근데 또 에러 던지네 ㅡㅡ;

 

Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from`.

 

- 이 에러가 뜨면

babel.config.js 파일에서 

module.exports = {
  presets: ['module:metro-react-native-babel-preset'],
  plugins: ['react-native-reanimated/plugin'],
};

추가해주고

run react-native start --reset-cache 명령어를 실행한다.

https://stackoverflow.com/questions/73046330/react-native-error-export-namespace-should-be-first-transformed-by-babel-plug

React Native error: Export namespace should be first transformed by `@babel/plugin-proposal-export-namespace-from

 

나는 App.tsx에서

import {NavigationContainer} from '@react-navigation/native';
import AuthNavigator from './navigators/AuthNavigator';

const App = () => {
  return (
    <>
      <NavigationContainer>
        <AuthNavigator />
      </NavigationContainer>
    </>
  );
};

이렇게 세팅하고

import React from 'react';
import {createNativeStackNavigator} from '@react-navigation/native-stack';
import LoginScreen from '../screens/auth/LoginScreen';

const AuthStack = createNativeStackNavigator();

const AuthNavigator = () => {
  return (
    <AuthStack.Navigator initialRouteName="LoginScreen">
      <AuthStack.Screen name="LoginScreen" component={LoginScreen} />
    </AuthStack.Navigator>
  );
};

export default AuthNavigator;

이렇게 해주었다.(거의 공홈 내용과 일치한다.)

이제 로그인 화면 만들고, 리액트 내비게이션이 작동하도록 화면 추가 후 스택에 넣고 해 봐야지