preface

RN uses react-router-dom to redirect routes. Text code dependence is not complete, just an introduction to the usage, you may be prompted to download a lot of packages at runtime.Copy the code

StackNavigator use

import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import React from 'react'; import Home from '.. /view/home'; import Detail from '.. /view/detail'; const Stack = createStackNavigator(); function Router() { return ( <NavigationContainer> <Stack.Navigator headerMode="screen" initialRouteName="Tabs" screenOptions={{ headerTitleStyle:{color:'green'} }}> <Stack.Screen name="Home" component={Home}></Stack.Screen> <Stack.Screen name="Detail" component={Detail}></Stack.Screen> </Stack.Navigator> </NavigationContainer> ) } export default Router;Copy the code
import React from 'react'; import {Text,View,TouchableOpacity} from 'react-native'; function Home(props){ const goto=function(){ props.navigation.navigate('Detail'); // Jump} return(<View style={{Challenges YContent :'center',alignItems:'center', Flex :1}}> <TouchableOpacity onPress={goto}> <Text>goto</Text> </TouchableOpacity> </View> ) } export default Home;Copy the code

Stack.Navigator common parameters:

HeaderMode: float: Renders a title bar at the top and displays an animation as the page changes. Screen: Each page has a title bar that fades in and out with the page. None: The navigation bar is not displayedCopy the code
InitialRouteName: The default navigation option for the pageCopy the code
ScreenOptions: headerTitleStyle: headerTitleStyle: title bar style gestureEnabled: Support gesture to close the page // just write three, hahahaCopy the code

BottomTabNavigator use

import { NavigationContainer } from '@react-navigation/native'; , import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import Home from '.. /view/home'; import About from '.. /view/about'; import React from 'react'; const Tab = createBottomTabNavigator(); function Tabs() { return ( <Tab.Navigator initialRouteName="Home" > <Tab.Screen name="Home" component={Home}></Tab.Screen> <Tab.Screen name="About" component={About}></Tab.Screen> </Tab.Navigator> ) } export default Tabs;Copy the code

You need to configure the screenOptions property in tab. Navigator to add ICONS.

ps

We usually use the two in combination in development, passing in the BottomTabNavigator component as a page in the StackNavigator screen. For example, some details pages do not need to display the bottom navigation bar.