If you want to understand the basic concepts of React Navigation 5.x, check out my previous post: React Navigation 5.x in detail
If the basic unit of view elements is the component, the basic unit of applications is the page. In front-end applications, pages are also called routing, which is an abstract concept of application pages. Since single-page applications do not exist, routing is what needs to be done for applications with multiple pages to smoothly transition from one page to another. Before version 0.44. Developers can jump to and from the page using the official Navigator component, but the Navigator component is not very friendly for larger projects, and the nesting of the code reduces the readability of the code. Therefore, it is recommended that developers use the React-Navigation library to manage the page and its hops. Currently, the React navigation supports three navigation functions, namely Tab navigation, Drawer navigation, and Stack navigation.
- Tab Navigation: Used to achieve Tab Navigation at the bottom of the page.
- Drawer Navigation: Used for sidebar Drawer Navigation.
- Stack Navigation: a Navigation component that contains a Navigation bar to switch to a page.
Among them, Stack Navigation is used most in development. As with any third party library, you need to install dependency scripts before using the React-Navigation library, as shown below.
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/masked-view
Copy the codeThe dependency libraries above are required to be installed as a base for the other navigation libraries, and once these base libraries are installed, the native plug-ins need to be linked in the native project. For aN iOS environment, open the native iOS project directory and run the pod install command to install the native plug-in. For Android, the latest React Native uses a lot of Android X properties, so you need to add Android X properties before using React Navigation. Open the native Android project with Android Studio and add the following script code to the app/build.gradle file.
Android {...// Omit other scripts
packagingOptions {
pickFirst "lib/arm64-v8a/librealm-jni.so"
}
}
configurations.all {
resolutionStrategy {
force "Com. Facebook. Soloader: soloader: 0.8.2"
}
}
def useIntlJsc = falseDependencies {...// Omit other scripts
if (useIntlJsc) {
implementation 'org.webkit:android-jsc-intl:+'
} else {
implementation 'org.webkit:android-jsc:+'}}Copy the codeRecompile the project. If there are no errors, the react-Navigation is successfully integrated. If you encounter other problems, you can follow the prompts to make changes. In addition, Tab Navigation, Drawer Navigation, and Stack Navigation belong to different libraries, so corresponding function libraries need to be installed during actual use, as shown below.
npm install @react-navigation/stack / / Stack navigation
npm install @react-navigation/bottom-tabs / / Tab navigation
npm install @react-navigation/drawer / / the Drawer navigation
Copy the codeNote that the above three libraries are independent of each other. You need to install the corresponding function libraries according to requirements. One of the most basic functions of the React-Navigation library is to implement route management, which uses Stack navigation. With Stack Navigation, developers can easily manage routing pages. As with Activity stack management in Android, every time a new page is opened, the new page is placed at the top of the routing stack. First, create two pages of HomePage and DetailPage with the following code.
const HomePage=(navigation)=> {
function jumpDetail() {
navigation.navigate('Detail');
}
return( <View style={styles.ct}> <TouchableOpacity style={styles.touchableStyle} onPress={jumpDetail}> <Text Style ={styles.txtstyle}> Jump details page </Text> </TouchableOpacity> </View>); }const DetailPage=()=> {
return (
<View style={styles.ct}>
<Text style={{fontSize: 24}}>Detail Screen</Text>
</View>
);
}
Copy the codeNext, create a routing stack navigator using the createStackNavigator() function, remembering to use the export keyword to export the file, as shown below.
const Stack = createStackNavigator(a);const RootStack= () => {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name='Home' component={HomePage}/>
<Stack.Screen name='Detail' component={DetailPage}/>
</Stack.Navigator>
</NavigationContainer>);
}
export default RootStack;
Copy the codeThe createStackNavigator() function contains two properties, the Navigator and the route, corresponding to NavigationContainer and stack. Navigator. Then wrap the outermost layer with the NavigationContainer component. Finally, add the stack navigator RootStack to the app.js entry file of the React Native App, as shown below.
const App = () => {
return (
<RootStack/>
);
};
Copy the codeRun the above code and click the jump button of HomePage to jump to the DetailPage page. The result is shown in the following figure.
navigation.navigate('Detail',{
itemId: 86,
otherParam: 'anything you want here'});Copy the codeThen, use route on the page where the parameters are received, as shown below.
const DetailPage=(router,navigation)=> {
const { itemId } = route.params;
const{ otherParam } = route.params; ...// omit other code
}
Copy the codeIn addition, Stack Navigation also provides many other useful properties, which can be set according to your needs during development. It can be found that for medium and large projects, the code hierarchy is very clear when using Stack Navigation for route management, which is also conducive to the later expansion of the project.
In addition to Stack Navigation, another commonly used feature is Tab Navigation. Tab Navigation is mainly used in the development of bottom Tab Navigation. You need to install the bottom-tabs plug-in before using it.
npm install @react-navigation/bottom-tabs
Copy the codeTo create Tab Navigation, you need to use the createBottomTabNavigator() function, which contains two properties, namely the Navigator and the route, corresponding to tab.navigator and tab.screen respectively. Finally wrap them with the NavigationContainer component, as shown below.
import {NavigationContainer} from '@react-navigation/native';
import {createBottomTabNavigator} from '@react-navigation/bottom-tabs';
const Tab = createBottomTabNavigator(a);const MainPage = () => {
return (<NavigationContainer>
<Tab.Navigator
screenOptions={({route}) => ({
tabBarIcon: ({focused,size}) => {
let sourceImg;
if (route.name === 'Home') {
sourceImg = focused
? require('./images/tab_home_p.png')
: require('./images/tab_home_n.png');
} else if (route.name === 'Me') {
sourceImg = focused
? require('./images/tab_me_p.png')
:require('./images/tab_me_n.png'); }
return <Image source={sourceImg}/>;
},
})}
tabBarOptions={{
activeTintColor: 'green',
inactiveTintColor: 'gray',
}}>
<Tab.Screen name="Home" component={HomeScreen}/>
<Tab.Screen name="Me" component={MeScreen}/>
</Tab.Navigator>
</NavigationContainer>
);
};
export default MainPage;
function HomeScreen(a) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{fontSize:28 }}>Home Page</Text>
</View>
);
}
function MeScreen(a) {
return (
<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
<Text style={{fontSize:28 }}>Me Page</Text>
</View>
);
}
Copy the codeAlso, Tab.Navigator and Tab.Screen provide a number of nice properties that developers can set to suit their development needs. Run the above code and it will look like the following image.
