前言
最近这段时间在自学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）进行替换。
reset
统一标题栏的样式
当使用StackNavigator进行界面导航的时，会给每个界面默认一个标题栏的（在Android中类似toolbar），而且每个界面都和可以进行定制的，如下：
static navigationOptions = {
headerTitle: "登录",
};
因为app中标题栏一般的样式都是统一的，如果每个界面都要去敲一边相同的样式代码，那太浪费时间了，所以官方文档中有提到这一点，就是StackNavigatorConfig对象，我们可以在这里对象中声明好标题栏的背景颜色，标题字体颜色、位置等样式。
StackNavigator
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文件
最后
小弟不才，还望多多指教！
网友评论