How to use react navigation method

react navigation will inject navigation into the props of all registered routing pages. How to use it: 1. Create the main route through "const Main = createStackNavigator({...})"; 2. Through "createBottomTabNavigator" "Create the bottom tab bar; 3. Create special switch routes through "createSwitchNavigator", etc.

The operating environment of this tutorial: Windows 10 system, react18.0.0 version, Dell G3 computer.

How to use the react navigation method?

react-navigation Common method

react-navigation is the routing manager used by the rn project; in addition to providing routing history management, there are also navigator UI components! ;

react-navigation will inject navigation into the props of all registered routing pages!!!

1. Create the main route;

createStackNavigator

where Including basically all page routing used in the project;

const Main = createStackNavigator({
    Tab: {
        screen: Tab,
        navigationOptions:{
            header:null
        }
    }
     。。。
},{
    initialRouteName :'Tab',   
})

2. Create the bottom tab bar;

createBottomTabNavigator

That is, several tab paging at the bottom of the app homepage

const Tab = createBottomTabNavigator({
    Home: {
        screen: Home,
        navigationOptions:{
            header:null,
            title:'最热',
            tabBarIcon:({focused,tintColor})=>{
                return (
                    <MCIcon name="chili-hot"  size={16} color = {focused?tintColor:&#39;#404040&#39;}></MCIcon>
                )
            }    
        }
    },
   。。。
},{
    initialRouteName :&#39;Home&#39;,
    tabBarOptions:{
        activeTintColor:&#39;#1d85d0&#39; 
    }
})

3. Create a special switch route; the page before jumping will not enter the history stack;

createSwitchNavigator
//欢迎页跳转不可返回
const Navigation = createSwitchNavigator({
    Init:Init,
    Main:Main
},{
    initialRouteName :'Init'
})

4. Create a top tab page label, which will occupy the navigation bar position

createMaterialTopTabNavigator
export default class Home extends Component {
  render() {
    const TabNav = createMaterialTopTabNavigator({
      Tab1:{
        screen: Tab1,
        navigationOptions:{
            title:'tab1',
            header:null
        }
      }
。。。
   
    },{。。。}) 
    return (
      <TabNav/>
    ) 
  }
}

5.navigationOptionsCommonly used configuration properties

headerTtile: page title

headerTitleStyle: style of title text

headerStyle: style of the entire title block

6 The reference attribute of the .tab part

tabBarOptions - 具有以下属性的对象:
activeTintColor -活动选项卡的标签和图标颜色。
activeBackgroundColor -活动选项卡的背景色。
inactiveTintColor -"非活动" 选项卡的标签和图标颜色。
inactiveBackgroundColor -非活动选项卡的背景色。
showLabel -是否显示选项卡的标签, 默认值为 true。
showIcon - 是否显示 Tab 的图标，默认为false。
style -选项卡栏的样式对象。
labelStyle -选项卡标签的样式对象。
tabStyle -选项卡的样式对象。
allowFontScaling -无论标签字体是否应缩放以尊重文字大小可访问性设置，默认值都是 true。
safeAreaInset - 为 <SafeAreaView> 组件重写 forceInset prop， 默认值：{ bottom: &#39;always&#39;, top: &#39;never&#39; }； top | bottom | left | right 的可选值有： &#39;always&#39; | &#39;never&#39;。

BottomTabBar component can also use this attribute

7. Make return function

Usually we use this.props on the page that needs to be returned .navigation obtains the navigation props object;

You can use

this.props.navigation.goBack()

to return to the page; but the prerequisite for this is that this.props.navgation must be the navigation of the current page; that is, you can view this .props.navigation.state.routeName to judge:

In some special cases, such as the return judgment of the Android return key, the return event may not be captured on the page, because the rollback event BackHandler will be passed upward ; then this.props.navigation may not be the navigation object that needs to be rolled back; so using go.Back() will not succeed; or in some cases, the navigation object may not have the goBack() method. Will cause this problem;

For example;

The home page is a first-level route, the detail page is a second-level route, and both pages have BackHandler callback functions; if there is no BackHandler in detai If captured by the current page, it will be passed to the BackHandler callback function in home; then this.props.navigation in home refers to the home page, not the details, so calling goBack will not succeed! ! !

Solution:

Use NavigationActions;

All NavigationActions return objects that can be sent to the router using the navigation.dispatch() method.

Supports the following operations:

Navigate - Navigate to another route

Back - Return to the previous state

Set Params - Set the parameters for a given route Parameter

Init - used to initialize the first state when the state is undefined

See the documentation for details: https://reactnavigation.org/docs/zh-Hans/navigation-actions.html

Pass:

dispatch(NavigationActions.back());

You can perform the return operation;

Note:

dispatch() method is in this.props.navigation

Recommended learning: "react video tutorial"

The above is the detailed content of How to use react navigation method. For more information, please follow other related articles on the PHP Chinese website!