React navigation v5 설정하기

시작하기

웹 React에서 사용하는 react-router-dom과 같이 react native에서 페이지네이션을 위해 react navigation을 사용하도록 하겠습니다.

설치하기

React native 초기설정 포스트를 통해 프로젝트를 생성합니다.

React Native 0.60이상에서 연결은 자동으로 되기때문에 이전버젼에 사용하던 react-native link을 따로 실행할 필요가 없습니다.

npm install @react-navigation/native

react navigation을 설치 합니다.

npm install @react-navigation/stack

스택 네비게이터 라이브러리 설치합니다.

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

React Native 프로젝트에 종속성 설치 합니다.

Mac을 사용 중이고 iOS 용으로 개발중인 경우 연결을 완료하려면 Cocoapods 를 통해 포드를 설치해야합니다.

npx pod-install ios

App.tsx

import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';

const HomeScreen:React.FC = () => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
    </View>
  );
}

type StackParamList = {
  Home: undefined;
  Detail: undefined;
};

const Stack = createStackNavigator<StackParamList>();

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

export default App;

Detail screen 추가

App.tsx

const DetailsScreen:React.FC = () => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Details Screen</Text>
    </View>
  );
}

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Home">
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Detail" component={DetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

Detailscreen을 추가했습니다.
다음으로 환면간에 이동을 구현해보겠습니다.

화면 이동

App.tsx

export type IHomeNavigationProps = {
  navigation: StackNavigationProp<StackParamList, ROUTE_NAMES.HOME>;
};
interface IHomeScreenProps extends IHomeNavigationProps {
  route: RouteProp<StackParamList, ROUTE_NAMES.HOME>;
}
const HomeScreen:React.FC<IHomeScreenProps> = ({navigation}) => {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Text>Home Screen</Text>
      <Button
        title="Go to Details"
        onPress={() => navigation.navigate("Detail")}
      />
    </View>
  );
}