react navigation具体方法如何使用

发布时间：2023-07-04 11:30:24 所属栏目：教程来源：未知

导读： 　　本篇内容介绍了“react navigation方法如何使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望

　　本篇内容介绍了“react navigation方法如何使用”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

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

　　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 (

　　                    <MCIcon name="chili-hot" size={16} color = {focused?tintColor:'#404040'}></MCIcon>

　　                )

　　            }

　　        }

　　    },

　　   。。。

　　},{

　　    initialRouteName :'Home',

　　    tabBarOptions:{

　　        activeTintColor:'#1d85d0'

　　    }

　　})

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

　　createSwitchNavigator

　　//欢迎页跳转不可返回

　　const Navigation = createSwitchNavigator({

　　    Init:Init,

　　    Main:Main

　　},{

　　    initialRouteName :'Init'

　　})

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

　　createMaterialTopTabNavigator

　　export default class Home extends Component {

　　 render() {

　　    const TabNav = createMaterialTopTabNavigator({

　　      Tab1:{

　　        screen: Tab1,

　　        navigationOptions:{

　　            title:'tab1',

　　            header:null

　　        }

　　      }

　　。。。

　　

　　    },{。。。})

　　    return (

　　      <TabNav/>

　　    )

　　 }

　　}

　　5.navigationOptions常用的配置属性

　　headerTtile: 页面标题

　　headerTitleStyle：标题文字的样式

　　headerStyle:标题整块的样式

　　6.tab部分的参考属性

　　tabBarOptions - 具有以下属性的对象:

　　activeTintColor -活动选项卡的标签和图标颜色。

　　activeBackgroundColor -活动选项卡的背景色。

　　inactiveTintColor -"非活动" 选项卡的标签和图标颜色。

　　inactiveBackgroundColor -非活动选项卡的背景色。

　　showLabel -是否显示选项卡的标签, 默认值为 true。

　　showIcon - 是否显示 Tab 的图标，默认为false。

　　style -选项卡栏的样式对象。

　　labelStyle -选项卡标签的样式对象。

　　tabStyle -选项卡的样式对象。

　　allowFontScaling -无论标签字体是否应缩放以尊重文字大小可访问性设置，默认值都是 true。

　　safeAreaInset - 为 <SafeAreaView> 组件重写 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 - 用于在状态未定义时初始化第一个状态

　　通过：

　　dispatch(NavigationActions.back());

　　就可以实行返回操作了

　　注意：dispatch()方法是在 this.props.navigation里面的。

（编辑：焦作站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!