1: Installation environment (MAC) :

  • 1: Node, Watchman, Xcode and CocoaPods. Please refer to: Official documentation

2: Configure react navigation/native route navigation:

  • 2.1 Installation in the project file

    npm install @react-navigation/native npm install react-native-reanimated react-native-gesture-handler React-native screens react-native safe-area-context @react-native community/ marshall-view {react-native communities need to be installed} NPX pod-install iosCopy the code

  • 2.2 After installation, introduce it in index.js or app.js at the top of the project file

  • import 'react-native-gesture-handler'; 

  • import { NavigationContainer } from '@react-navigation/native';

  • 2.3 Wrap the entire application in NavigationContainer

<NavigationContainer> <App /></NavigationContainer>

  • 2.4 Configuring the routing page Use react- Navigation/Stack

{Install first}

npm install @react-navigation/stack 

{reference in app.js after installation}

import { createStackNavigator } from '@react-navigation/stack';

{create stack navigator}

const Stack = createStackNavigator(); {after NavigationContainer component}

const App =()=>{    
return(
       <NavigationContainer>
            <Stack.Navigator initialRouteName="Home">           
               <Stack.Screen name="Home" component={Home}></Stack.Screen>       
            </Stack.Navigator>       
        </NavigationContainer>
    )
}
Copy the code
Parameters accepted by the stack. Navigator component

InitialRouteName Start page

Stack.Screenname=” Screenname “component={Screenname}

  • 2.5 Switching paths due to transfer parameters

Create two page components

Const Home =({navigation}) =>{const detailsTap =()=>{navigation.navigate("Details",{{/* * * * itemId:20, }); } return( <> <Button onPress={detailsTap.bind(this)}></Button> </> ) }Copy the code

Const Details =({route,navigation}) =>{cosnt {itemId} = route.parmas; return( <> <View>{itemId}</View> </> ) }Copy the code