关于React Navigation的一些使用技巧

[panyz]

前言

最近这段时间在自学React Native，然后用干货集中营提供的API开发一个入门级的app（在这里对gank表示万分感谢啊！）。

在开发过程中呢，我用到了Facebook官方推荐使用的一个组件React Navigation来对页面进行导航，不得不说这组件也真的很好使。下面就是我在使用过程中总结的一些技巧。（虽然好像也没什么技巧性，不过还是当笔记记下来吧😂）

这篇并不是介绍如何使用React Navigation，所以各位还是先看看官方文档的介绍吧！

如何从登录界面跳转后，点击后退按钮，app不再返回到登录界面？

一般app从登录界面输入账号密码登录之后，跳转到主页，然后点击后退按钮（针对Android系统设备），要么就是退出app，要么就直接退回到手机的后台。但是使用React Navigation，就有这个问题，点击后退按钮，app还会返回到登录界面，这应该怎么弄呢？我的做法是这样的：

• 首先从react-navigation中导入NavigationActions

import {NavigationActions} from 'react-navigation';

• 当点击登录按钮时调用下面的一个function，跳转到主页去即可

 const resetActions = NavigationActions.reset({
            index: 0,
            actions: [NavigationActions.navigate({routeName: 'Main'})]
        });
 this.props.navigation.dispatch(resetActions);

reset的作用我看官方文档大意好像是说消除之前设置的navigation state，然后再设置新的action进行替换（本人翻译水平有限，不知道大意是不是这样，如有误请大神纠正），然后将主页的界面放到第一位（index：0）进行替换。

统一标题栏的样式

当使用StackNavigator进行界面导航的时，会给每个界面默认一个标题栏的（在Android中类似toolbar），而且每个界面都和可以进行定制的，如下：

 static navigationOptions = {
        headerTitle: "登录",
    };

因为app中标题栏一般的样式都是统一的，如果每个界面都要去敲一边相同的样式代码，那太浪费时间了，所以官方文档中有提到这一点，就是StackNavigatorConfig对象，我们可以在这里对象中声明好标题栏的背景颜色，标题字体颜色、位置等样式。

const SimpleApp = StackNavigator({
    Login: {screen: LoginPage},
    Main: {screen:Navigator},
    Home :{screen:HomePage},
    Next: {screen: ThirdScreen},
    Gank: {screen: GankPage},
    Blog: {screen: BlogPage},
    PersonalInfo: {screen: PersonalInfoPage}
}, {
    initialRouteName: 'Login',
    navigationOptions: {
        headerTintColor: '#51c4fe',
        headerStyle: {backgroundColor: "white"},
        headerTitleStyle: {alignSelf: 'center'},
    },
});

将TabNavigator抽离，减少代码的冗余

TabNavigator可以实现app底部4个导航栏的作用。一般从登录界面跳转到主页的时候，主页就是呈现4个底部导航栏的和控制界面导航，不要再到主页的上进行一些业务逻辑的操作，因为这样会导致功能职责的一些问题！

完整代码可参考我的Github的这个项目GankAndPanyz的Login.js文件

最后

小弟不才，还望多多指教！

[horan]

有帮助，十分感谢~

[est7]

你好，这个库可以实现andorid 中clipChliden 的那种中间tab溢出的效果吗

[Yoler]

登录界面不要导航条，全屏显示怎么做，是要把height设置成0吗

[赵林]

你好，请教个问题，NavigationActions 重置导航路径时，跳转到首页，在首页按下返回键程序就回到桌面了（但并没有退出），我期望能够按两次返回键退出应用，怎么做？

[elone]

请教个问题，从登陆界面跳转到主界面是可以实现的。主界面是tab navigator ，此时提供一个登出的功能的话，应该怎么做？