์๋ ํ์ธ์ Foma ์ ๋๋ค.
ํ์์ ๋ฆฌ์กํธ ๋ค์ดํฐ๋ธ์์ navigation์ props๋ก ์ ๋ฌํ๋ ๊ฒ ๋๋ฌด ๋ถํธํ๋๋ฐ์.
์ค๋์ React-Native์์ navigation์ props๋ก ์ ๋ฌํ๋ ๊ฒ์ด ์๋, useNavigation๊ณผ useRoute๋ฅผ ๋ง๋ค์ด ์ค์
ํ๋ฉด์ ์ด๋๊ณผ ํจ๊ป ๋ฐ์ดํฐ๋ฅผ ์ ๋ฌํ๊ณ ๋ฐ์๋ณด๋๋ก ํ๊ฒ ์ต๋๋ค.
๋ฐ๋ก ์์ํ ๊ฒ์~
Install
npm install @react-navigation/native
npm install @react-navigation/native-stack
npm install @react-navigation/stack
npm install react-native-safe-area-context
Navigation
Navigation/index.ts
๊ธฐ์กด Props์ ๊ฐ์ด Navigation์ ๊ตฌ์ฑํด ์ค๋ค.
const Stack = createNativeStackNavigator();
export default function Navigation() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName={screens.Login}>
<Stack.Screen name={screens.Login} component={LoginScreen} />
<Stack.Screen
name={screens.ChatRoom}
component={ChatRoomScreen}
/>
<Stack.Screen name={screens.Chat} component={ChatScreen} />
</Stack.Navigator>
</NavigationContainer>
);
}
๋ค๋ง ์ถ๊ฐํด ์ค์ผ ํ ๋ถ๋ถ์ RootStackParamList์ธ๋ฐ ,
๊ตฌ์ฑ๋์ด ์๋ ํ๋ฉด์ navigate ๋ ๋ ์ด๋ค ๊ฐ๋ค์ ๋๊ฒจ์ค ๊ฒ์ธ์ง ์ ์ํฉ๋๋ค.
export type RootStackParamList = {
LoginScreen: undefined;
ChatRoomScreen: undefined;
ChatScreen: {room: string};
};
ChatRoomScreen.tsx
useNavigation, StackNavigationProp, RootStackParamList๋ฅผ import ํด์ค๋๋ค.
import {useNavigation} from '@react-navigation/core';
import {StackNavigationProp} from '@react-navigation/stack';
import {RootStackParamList} from '../Navigation';
๊ทธ ๋ค์ ์๋์ ๊ฐ์ด navigation์ useNaviation์ผ๋ก ๋ง๋ค์ด ์ฃผ๋๋ฐ์.
๊ฐ๋จํ๊ฒ ์ค๋ช ํ๋ฉด StackNavigationProp์ Naviation์ ์๋ Prop๋ค์ ์ ์ํ๋๊ฑด๋ฐ, ๊ทธ๊ฒ์ ์์์ ๋ง๋ค์ด์ค RootStackParamList๋ก ํ๊ฒ ๋ค๋ ์๋ฏธ์ ๋๋ค.
const navigation = useNavigation<StackNavigationProp<RootStackParamList>>();
์ฑ๋ฃธ ์คํฌ๋ฆฐ์์ ์ฑ ์คํฌ๋ฆฐ์ผ๋ก ์ด๋ํ ๋ ๋ฐฉ ์ ๋ณด๋ฅผ ํจ๊ป ๋๊ฒจ์ฃผ๋๋ก ํ๊ฒ ์ต๋๋ค.
์์์ ์ ์ํด์ค๋๋ก "ChatScreen" (ํ๋ฉด ์ด๋ฆ)๊ณผ ๋๊ฒจ์ค ์ ๋ณด๋ฅผ ์ ๋ ฅํด ์ค๋๋ค.
<Pressable
onPress={() => {
navigation.navigate("ChatScreen", {room: 'A'});
}}>
๋ง์ฝ ์์์ ์ ์ํ์ง ์์ ํ๋ฉด ์ด๋ฆ์ด๋ prop์ ์ ๊ฒ ๋๋ฉด ์ค๋ฅ๊ฐ ๋ฐ์ํฉ๋๋ค.
ChatScreen.tsx
RouteProp๊ณผ useRoute๋ฅผ import ํด์ค๋๋ค.
import {RouteProp, useRoute} from '@react-navigation/native';
๊ทธ ๋ค์ ์๋์ ๊ฐ์ด route๋ฅผ ๋ง๋ค์ด ์ฃผ๋๋ฐ์.
RouteProp์ RootStackParamList์ "ChatSceen"(param ๋ฐ์์ฌ ํ๋ฉด)์ผ๋ก ๊ตฌ์ฑํด ์ค๋๋ค.
์ฌ๊ธฐ์๋ ์์ ๋ง์ฐฌ๊ฐ์ง๋ก RootStackParamList์ ์์ง ์์ ํ๋ฉด์ ์ง์ ํด ์ฃผ๋ฉด ์ค๋ฅ๊ฐ ๋ฐ์ํฉ๋๋ค.
const route = useRoute<RouteProp<RootStackParamList, "ChatScreen">>();
์๋์ ๊ฐ์ด type์ผ๋ก ๋๋ ์ ์ง์ ํด ์ค๋ ๋ฉ๋๋ค.
type ScreenRouteProp = RouteProp<RootStackParamList,"ChatScreen">;
const route = useRoute<ScreenRouteProp>();
๊ทธ ๋ค์ route์ params์ ๋ฐ์์ฌ ์ ๋ณด๋ฅผ ์ ๋ ฅํ๋ฉด
console.log(route.params?.room);
์๋์ ๊ฐ์ด ์ ์์ ์ผ๋ก ์ ์ ๋ฌ๋๊ฒ ๋ฉ๋๋ค.
๋๋ ์
React-native๋ก ํ๋ฉด ์ด๋ํ ๋ ํญ์ navigation prop์ ๋๊ฒจ์ฃผ๊ณ ๋ฐ๊ณ ํ๋๋ฐ,
์ด๊ฒ ํ๋ฉด์ด ๋ง์์ง๋ฉด ๋ง์ ์ง์๋ก ๊ณ์ํด์ ๋ค๋น๊ฒ์ด์ ์ ์ ๋ฌํด์ผ ํ๋ค.
๊ทธ๋์ ๋ญ ์ํ๋ก ๊ด๋ฆฌํ ์ ์๋ ๊ฒ ์์๊น ํ๊ณ ์ฐพ์๋ดค๋๋ useNavigation๊ณผ useRoute๊ฐ ์์๋ค.
ํ์คํ ํ๋ฉด ๊ฐ์ ๋ค๋น๊ฒ์ด์ ์ ์ ๋ฌํ ๊ฒ ์์ด์ ๋ ๊น๋ํด์ ธ์ ์์ด ์์ํ๋๋ฐ,
iOS์์ ํ๋ฉด ์ด๋ํ๋ ๊ฑฐ์ ๋นํด ๋ญ ์ธํ ํด์ค์ผ ํ ๊ฒ ๋๋ฌด ๋ง์์ ์์ฒญ ๋ณต์กํ๋ค๋ ์๊ฐ์ด ๋ค์๋ค..
๋๊ธ