[React Native] Navigator - Screen 이동

TIL 8/23

 

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

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

npm install @react-navigation/native

npm install react-native-screens react-native-safe-area-context

공식문서에 따라 필요한 패키지와 라이브러리를 설치해준다.

 

App.js

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';

export default function App() {
  return (
    <NavigationContainer>{/* Rest of your app code */}</NavigationContainer>
  );
}

이러한 공식 홈페이지의 내용에 따라 현재 내 App.js를 변경해주었다.

return (
    <Provider store={store}>
      <NavigationContainer>
        <SafeAreaView style={tw`bg-white h-full`}>
          <HomeScreen />
        </SafeAreaView>
      </NavigationContainer>
    </Provider>
  );

NavigationContainer 태그로 현재 스크린을 감싸준다.

 

---

https://reactnavigation.org/docs/hello-react-navigation

https://reactnavigation.org/docs/hello-react-navigation/

그리고 필요한 라이브러리들 마저 설치해주기

npm install @react-navigation/native-stack

App.js 상단에 

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

import 추가 후,

const Stack = createNativeStackNavigator();

Navigator 동작을 관리하는 변수인 Stack을 선언한다. 

const App = () => {
  const Stack = createNativeStackNavigator();
  const isDarkMode = useColorScheme() === 'dark';
  const backgroundStyle = {
    backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  };

  return (
    <Provider store={store}>
      <NavigationContainer>
        <SafeAreaView style={tw`bg-white h-full`}>
          <Stack.Navigator>
            <Stack.Screen
              name="HomeScreen"
              component={HomeScreen}
              options={{
                headerShown: false,
              }}
            />
            <Stack.Screen
              name="MapScreen"
              component={MapScreen}
              options={{
                headerShown: false,
              }}
            />
          </Stack.Navigator>
        </SafeAreaView>
      </NavigationContainer>
    </Provider>
  );
};

기존에 만들어둔 HomeScreen과 MapScreen을 Stack.Screen에 연결한다.

---

만약 빌드에 실패하거나 에러가 발생한다면

cd ios
pod install
cd ..

명령어 입력 후 다시 시도해보자