Definition
Definition
Practice
Basic
How to get current route name?
navigation.state.routeName
How to access navigation object?
Use useNavigation hook
import { useNavigation } from '@react-navigation/native'; ... const navigation = useNavigation(); ... navigation.navigate('route-name', { data: {} })
import { useRoute } from '@react-navigation/native'; ... const route = useRoute(); const { data } = route.params;
How to go back?
navigation.goBack();
Tab bar
How to show/ hide a tab?
... const Tab = createBottomTabNavigator(); function MyTabs() { const [showTab, setShowTab] = React.useState(true); // Show the about tab after 5 seconds. // Change this to use Redux or however // you would like to change which tabs are displayed setTimeout(() => { setShowTab(false); console.log('Hide tab'); }, 5000); return ( <Tab.Navigator> <Tab.Screen name="Home" component={HomeScreen} /> {showTab ? ( <Tab.Screen name="About" component={AboutScreen} /> ) : null} <Tab.Screen name="Settings" component={SettingsScreen} /> </Tab.Navigator> ); } export default function App() { return ( <NavigationContainer> <MyTabs /> </NavigationContainer> ); }
How to hide a tab but still able to navigate to it?
<Tab.Navigator screenOptions={({ route }) => ({ tabBarButton: [ "Search", "Help" ].includes(route.name) ? () => { return null; } : undefined, })}> <Tab.Screen name="Page 1" component={FeedScreen}></Tab.Screen> <Tab.Screen name="Page 2" component={LaunchScreen}></Tab.Screen> <Tab.Screen name="Page 3" component={MyEventsScreen}></Tab.Screen> <Tab.Screen name="Page 4" component={MyTicketsScreen}></Tab.Screen> <Tab.Screen name="Search" component={SearchScreen}></Tab.Screen> <Tab.Screen name="Help" component={SearchScreen}></Tab.Screen> </Tab.Navigator>
How to create independent stacks inside a tab?
Main tab bar
export const TabStack = () => { return ( <Tab.Navigator> <Tab.Screen name="Screen1" component={ComponentScreen1}/> <Tab.Screen name="Screen2" component={ComponentScreen2}/> <Tab.Screen name="Screen3" component={ComponentScreen3Stacks}/> </Tab.Navigator> ); };
Independent stacks Sub31, Sub32, Sub33 inside tab Screen3
export default function Screen3Stacks() { return ( <Tab.Navigator screenOptions={({ route }) => ({ tabBarButton: [ 'Sub31', 'Sub32', 'Sub33', ].includes(route.name) ? () => { return null; } : undefined, tabBarVisible: false, })} > <Tab.Screen name="Sub31" component={ComponentSub31} /> <Tab.Screen name="Sub32" component={ComponentSub32} /> <Tab.Screen name="Sub33" component={ComponentSub33} /> </Tab.Navigator> ); }
Screen header
How to set header title, align title/ set right icon?
React.useEffect(() => { navigation.setOptions({ headerTitleAlign: 'center', headerTitle: () => ( <Text>Home</Text> ), headerRight: () => ( <Icon name="search-sharp" type="ionicon" size={30} /> ), }); }, []);
Leave a Reply