react navigation方法怎么用

PHP中文网 • 2025年3月11日 18:41:41 • 编程技术 • 阅读 2

react navigation会在所有注册路由页面的props里面注入navigation，其使用方法：1、通过“const Main = createStackNavigator({…})”方式创建主路由；2、通过“createBottomTabNavigator”创建底部标签栏；3、通过“createSwitchNavigator”创建特殊switch路由等。

本教程操作环境：Windows10系统、react18.0.0版、Dell G3电脑。

react navigation方法怎么用？

react-navigation 常用方法

react-navigation是rn项目使用路由管理器；除了提供路由history管理，还有导航器的ui组件！；

react-navigation会在所有注册路由页面的props里面注入navigation!!!

1.创建主路由；

createStackNavigator

其中包括项目中所使用的基本所有的页面路由；

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

登录后复制

2.创建底部标签栏；

createBottomTabNavigator

即app首页底部的几个tab分页

const Tab = createBottomTabNavigator({    Home: {        screen: Home,        navigationOptions:{            header:null,            title:'最热',            tabBarIcon:({focused,tintColor})=>{                return (                                    )            }            }    },   。。。},{    initialRouteName :'Home',    tabBarOptions:{        activeTintColor:'#1d85d0'     }})

登录后复制

3.创建特殊switch路由；跳转之前的页面将不会进入history堆栈；

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

登录后复制

4.创建顶部tab页标签，会占用导航栏位置

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

登录后复制

5.navigationOptions常用的配置属性

headerTtile: 页面标题

headerTitleStyle：标题文字的样式

headerStyle:标题整块的样式

6.tab部分的参考属性

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

登录后复制

BottomTabBar组件也可以草考这个属性

7.制作返回功能

通常我们在需要返回的页面上使用 this.props.navigation 获取到navigation 的props对象；

可以使用

this.props.navigation.goBack()

登录后复制

来返回页面；但是这样做的前提是 this.props.navgation必须是当前页面的navigation;即可以查看 this.props.navigation.state.routeName 来判断：

某些特殊的情况下，比如安卓返回键的返回判断有可能返回事件不是在该页面捕获，因为回退事件BackHandler是会向上传递的；那么this.props.navigation可能就不是需要回退的压面的navigation对象了；所以已使用go.Back()是不会成功的；或者有些情况下naviagtion对象不一定有goBack()方法也会造成这个问题；

例如;

home页面是一级路由，detail页面是二级路由，两个页面都设置了BackHandler的回调函数；若detai里面的BackHandler没有被当前页面捕获的话就会传递给home里面的BackHandler回调函数；那么在home里的 this.props.navigation就是指的home页面的，而不是detail，所以调用goBack也不会成功！！！

解决方法：

使用NavigationActions ；

所有NavigationActions返回可以使用navigation.dispatch()方法发送到路由器的对象。

支持以下操作：

Navigate – 导航到另一条路由

Back – 回到之前的状态

Set Params – 设置给定路由的参数

Init – 用于在状态未定义时初始化第一个状态

具体看文档：https://reactnavigation.org/docs/zh-Hans/navigation-actions.html

通过：