5월 27일

React Native Navigation Type

우선 React Native에서 Navigation 기능은 React Navigation을 사용했다

In TypeScript

해당 라이브러리에서 Navigate를 하는 방법은 Root에서 StackNavigate를 통해 진행된다

export default function App() {
  const Stack = createNativeStackNavigator<RootStackParamList>();

  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Home"
          options={{ title: "도감" }}
          component={HomeScreen}
        />
        <Stack.Screen name="DetailScreen" component={PokemonDetailScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

위 코드처럼 Stack이라는 NativeStack을 만들어서 Navigator 안에 Screen이 있는 구조로 되어있다

Stack을 보면 createNativeStackNavigator의 제네릭 타입으로 RootStackParamList가 들어가있는걸 볼 수 있다

Navigation을 위해 Screen의 Children으로 navigate를 사용하기 위해서는 Stack에 어떤 Screen이 들어있는지 타입으로 지정해 줘야한다

코드

export type RootStackParamList = {
  Home: undefined;
  DetailScreen: PokemonDataType;
};

위 코드처럼 Root에 Navigate할 Screen들을 추가 해주면 되고 뒤 타입은 어떤걸 params로 넘겨줄것인지를 타입설정 하는것인데 없으면 undefined 하면된다

Screen

이제 Navigate할 함수를 작성해주면 되는데 사용 방법은 Screen Component에 Props로 넣어주면된다

export type PokemonDetailScreenProps = NativeStackScreenProps<
  RootStackParamList,
  "Home"
>;

export default function HomeScreen({ navigation }: PokemonDetailScreenProps) {
  ...(코드들)
  
  아래 코드를 onPress에서 실행시키면 됌
  navigation.navigate("Root에 넣어둔 Screen의 Key값",{넘겨줄 파라미터 없으면 생략})
}