※ react navigation 6.x 기준입니다.
1. navigate to Tab navigator
react navigation 에서 Tab navigator 로 navigate 할 때 기본적으로 initialRoute 로 넘어간다.
종종 initialRoute 말고 다른 탭의 screen 으로 넘어가고 싶을 때가 있는데, 매번 방법을 까먹어서 이렇게 정리하게 되었다.
navigation.navigate('Tab', { screen: "ScreenName" } )
2. navigation stack reset 방법
screenName에는 이동할 스크린 이름을 넣으면 된다.
routes 에 's' 가 붙음에 주의하자.
navigation.reset({routes: [{name: "screenName", params: { ... }}]})
3. Drawer Navigator 구현 방법
navigator 로 drawer를 쓸 것은 아니지만 drawer를 그냥 하나의 스크린으로 사용하고 싶을 때,
drawer stack로 사용하는 stack navigator를 감싸서 사용할 수 있다.
drawer는 DrawerStack.Navigator 의 drawerContent 에서 사용하면 된다.
const MainStack = createNativeStackNavigator();
const DrawerStack = createDrawerNavigator();
const MainStackScreens = () => {
return (
<MainStack.Navigator screenOptions={myOptions}>
<MainStack.Screen name="Tab" component={Tab} />
</MainStack.Navigator>
);
};
const DrawerStackScreens = () => {
return (
<NavigationContainer theme={myTheme}>
<DrawerStack.Navigator
screenOptions={globalScreenOptions}
drawerContent={({ navigation }: any) => <MyDrawer navigation={navigation} />}
>
<DrawerStack.Screen
name="MainStackScreens"
component={MainStackScreens}
options={myOptions}
/>
</DrawerStack.Navigator>
</NavigationContainer>
);
};
4. navigation focus 감지
navigation focus를 감지하고 싶을 때 react navigation 에서 제공하는 편한 방법이 있다.
import { useFocusEffect } from '@react-navigation/native';
useFocusEffect(
//화면으로 들어왔을 때
React.useCallback(() => {
console.log('들어옴')
return () => {
//화면에서 나갈 때
console.log('나감')
};
}, []),
);
반응형
'REACT NATIVE' 카테고리의 다른 글
[REACT NATIVE] 안드로이드 APK(AAB) 파일 생성하고 Release 빌드하기 (0) | 2021.11.13 |
---|---|
[REACT NATIVE] 다크모드 disable (0) | 2021.11.11 |