RN: React Navigation route params 전달과 navigation Props

Lumpen·2024년 8월 20일
0

ReactNavigation

목록 보기
16/16

export type RootStackParamList = {
  Root: undefined;
  Detail: { id: number }; // route params 에 들어가는 id
};

type Props = NativeStackScreenProps<RootStackParamList, 'Detail'>; // RootStackParamList 에서 정의된 Detail 페이지
const Detail = ({ navigation, route }: Props) => {
  const { id } = route.params;
  return (
    <View>
      <TouchableOpacity onPress={() => navigation.pop()}>
        <Text>{id}</Text>
      </TouchableOpacity>
    </View>
  );
};

export default Detail;
const ListCard = () => {
  const { navigate } =
    useNavigation<NativeStackNavigationProp<RootStackParamList>>();
  return (
    <TouchableOpacity onPress={() => navigate('Detail', { id: 0 })}> 
    	// Detail 페이지에 전달될 params 값과 함께 navigate()
      <Text>Menu</Text>
    </TouchableOpacity>
  );
};
profile
떠돌이 생활을 하는. 실업자, 부랑 생활을 하는

0개의 댓글