Shulou(Shulou.com)06/02 Report--

This article mainly explains "what is the basic use of react-navigation6.x routing library". The content of the explanation is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the basic use of react-navigation6.x routing library".

React-native project initialization

Open cmd,cd to the folder where you want to create the rn project.

Npx react-native init testRN

Here my project name is set to testRN, which can be set by myself.

Install the react-native project

Connect to the Android virtual machine or usb debug real machine, cd into the created project root directory, yarn android installation and startup.

Yarn android

After the initial installation, if the phone is not disconnected, you only need to enter the virtual machine or phone into the project app, and then start the pc in the project root directory yarn start. You don't have to install it again. You may have to reinstall it after disconnection.

Yarn start

After startup, press r in the cmd interface to update.

React-navigation routing Library installation

The content is based on Android side testing, and I didn't test ios.

Install the following packages in one breath.

Yarn add @ react-navigation/native react-native-screens react-native-safe-area-context @ react-navigation/native-stack

For additional configuration of Android, modify the MainActivity.java file at testRN\ android\ app\ src\ main\ java\ com\ testrn.

Code:

Import android.os.Bundle; @ Override protected void onCreate (Bundle savedInstanceState) {super.onCreate (null);} use the routing library

Modify app.js to the following code

Import * as React from 'react';import {View, Text} from' react-native';import {NavigationContainer} from'@ react-navigation/native';import {createNativeStackNavigator} from'@ react-navigation/native-stack';function HomeScreen () {return (HomeScreen);} const Stack = createNativeStackNavigator () Function App () {return (/ / NavigationContainer is the routing container, put all the relevant content in the window where {/ * Stack.Screen is routed, name sets the window name for jumping, and the component contents of the window are placed in component * /});} export default App

Route hopping and routing parameters import * as React from 'react';// add Buttonimport {Button, View, Text} from' react-native';import {NavigationContainer} from'@ react-navigation/native';import {createNativeStackNavigator} from'@ react-navigation/native-stack' / / add navigation parameter function HomeScreen ({navigation}) {return (HomeScreen {/ * add jump button * /} navigation.navigate ('Details')} / >);} function DetailsScreen () {return (DetailsScreen);} const Stack = createNativeStackNavigator () Function App () {return (/ / NavigationContainer is the routing container, put all the relevant content in the window where {/ * Stack.Screen is the route, name sets the window name for jumping, and the component content of the window is placed in component * /});} export default App; sets the routing title

The window will use name as the title name by default, of course, you can also set it yourself.

Use my home instead of Home as the navigation title.

Usually, when the first-level page jumps to the second-level page, it may display different titles according to the content, so you need to configure title dynamically.

({title: route.params.title})} / >

Then all you have to do is pass title when the first-level page jumps.

Navigation.navigate ('Details', {title:' secondary page'})} / >

Note here that if the first-level page does not pass title, it is best to pass an empty object or set the initial value on the second-level window or it will report an error.

You can also update title manually, using navigation.setOptions (), which modifies the properties in options on screen.

Navigation.setOptions ({title: 'updated updated'})} / > customize the title component

Set the headerTitle callback to return a functional component, which can be customized within the component and can be an image.

Function LogoTitle () {return ();} / > title button

Also on the options of screen, there is a headerRight that can put the button.

, headerRight: () = > (alert ('This is a roommates')} title= "Info" color= "# fff" / >),}} / >

HeaderBackImageSource can modify the picture of the back button.

({title: route.params.title, headerBackImageSource: detailsImg,})} / > Thank you for reading. This is the content of "what is the basic use of react-navigation6.x routing Library". After the study of this article I believe you have a deeper understanding of what is the basic use of the react-navigation6.x routing library, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.