[React Native] React Navigation 설치 및 사용법 (cli, typescript)

yarn add @react-navigation/native \
  react-native-screens \
  react-native-safe-area-context \
  @react-navigation/native-stack

일단 기본적으로 필요한 의존성들을 설치해 준다.

그 후 꼭 pod install 을 해주어야 한다!

 

근데 나는 createNativeStackNavigator 가 아니라 createStackNavigator 를 사용하고 싶었기 때문에 아래를 추가로 설치해 줬다.

yarn add react-native-gesture-handler \
  @react-navigation/stack

createNativeStackNavigator 를 쓰는 게 아니라면 의존성을 삭제해도 되는 건지... 그걸 잘 모르겠다!

 

const Main = styled.SafeAreaView`
  flex: 1;
  justify-content: center;
  align-items: center;
`;

const Home = () => {
  return (
    <Main>
      <Text>안녕하세요</Text>
    </Main>
  );
};

type RootStackParamList = {
  Home: undefined;
};

const Stack = createStackNavigator<RootStackParamList>();

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

나중에는 파일로 나누겠지만 일단 테스트를 위해서 간단하게 작성해 보았다.

일단은 기본적으로 이 구조처럼 작성하면 된다.

이렇게 나오게 된다.

그럼 일단 신경 쓰이는 게 바로 헤더일 텐데.

주로 헤더를 커스텀해서 쓰는 경우가 많아서 저 부분을 없애는 경우가 많다.

그럴 때는 <Stack.Navigator screenOptions={{ headerShown: false }}>

이렇게 Stack.Navigator 태그 내에 입력을 해서 안 보이게 할 수 있다.

 

혹은 특정 스크린에서만 헤더가 안 나오게 하고 싶다라면, 예를 들어 로그인 창과 같이..

그런 경우는 Stack.Navigator 태그가 아니라 Stack.Screen 태그에 입력해 주면 된다.

<Stack.Screen options={{ headerShown: false }} /> 이렇게 입력할 수 있다.

이때 screenOptions 와 options 차이가 있으니 헷갈리면 안 되고, 객체를 입력하기 때문에 변수에 입력해서 변수를 넣어줄 수도 있고,

아니라면 중괄호를 두 개 입력해야 한다는 것을 잊으면 안 된다.

 

태그 내에서 헤더를 바꾸는 옵션도 더 많이 있는데, 그건 다음에 기회가 되면 다뤄봐야 겠다.

 

다른 사람들 코드를 보면 Stack 을 따로 나눠서 사용하는 경우가 많던데 아직 어떤 구조가 좋은지를 모르겠다.

 

중간에 문제가 있었는데, "Cannot read property 'createGestureHandler' of null" 이런 에러가 발생했다.

뭔가 익숙한데 했더니.. react-native-gesture-handler 를 설치하고 pod install 을 안 해서 그런 것이었다.

주로 Cannot read property ... of null 의 경우는 pod install 을 안 했을 때 생기는 문제인 것 같다.