最近在学习React Native，看了一周的RN基本用法和JS的基础知识，上周末自己捣鼓了一点东西，感觉收获很大，所以决定写下来记录一下。
之前基本没有接触过js，刚开始还是有些不适应。js是相比于OC或这Java来说是一门经常变化的语言，对于像我一样没有JS基础的同学，这里推荐看阮一峰老师的ES6入门，因为RN现在推荐按照ES6的语法开发，并且这种语法也更接近OC这种面向对象的语言，比较好学习。
下面进入正题部分，讲一讲学习Navigator的整个过程。
首先官方的使用指南中提到导航器比较，大意就是“你用我们自己写的Navigator吧，别用第三方的。”既然官方都这么建议了，那我就听他的，然后根据指引，来到了这里，一步步写好后，就可以看到跳转的跳转效果了，大概是下面的样子：
Paste_Image.png
点击按钮跳转（忽略留白吧。。）
Paste_Image.png
这里有两个地方比较特别，一个是"{...route.params}"，具体解释可以参考这里，另外一个是"<TouchableOpacity onPress={this._pressButton.bind(this)}>"，关于this的问题，可以参考这里和这里。
然后我想给Navigator加上NavigationBar，于是去官方文档里找了下相关方法，发现有一个navigationBar可以用来设置导航栏的样式，于是我们加上了，相关代码如下：
navigationBar={
<Navigator.NavigationBar
routeMapper={this._navigationBar()}
style={styles.navBar}
/>
}
_navigationBar() {
return {
LeftButton: function(route, navigator, index, navState) {
if (index === 0) {
return null;
}
var previousRoute = navState.routeStack[index - 1];
return (
<TouchableOpacity
onPress={() => navigator.pop()}
style={styles.navBarLeftButton}>
<Text style={[styles.navBarText, styles.navBarButtonText]}>
{previousRoute.title}
</Text>
</TouchableOpacity>
);
},
RightButton: function(route, navigator, index, navState) {
return (
<TouchableOpacity
onPress={() => route.rightButton && route.rightButton && route.rightButton.clicked()}
style={styles.navBarRightButton}>
<Text style={[styles.navBarText, styles.navBarButtonText]}>
{route.rightButtonTitle}
</Text>
</TouchableOpacity>
);
},
Title: function(route, navigator, index, navState) {
return (
<Text style={[styles.navBarText, styles.navBarTitleText]}>
{route.title}
</Text>
);
},
需要重点说明的是L/RButton和Title的内容源都是route的属性，所以在使用Navigator的时候，使用方式如下：
navigator.push({
name: 'DetailScene',
component: DetailScene,
title: '测试',
rightButtonTitle: '下一步',
})
跳转后的页面如下：
Paste_Image.png
现在问题来了，用OC的时候，设置NavigationBar的时候，我们的实现方式大致是下面这个样子：
//ListViewController.m
[self.navigationController push:detailViewController animated:YES];
//DetailViewController.m
self.title = @"帖子详情";
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"分享" style:UIBarButtonItemStylePlain target:self action:@selector(share)];
问题就是title，rightTitle这些属性应该是DetailScene需要的属性，从功能上划分，这些属性的设置应该有DetailScene来设置，而不应该在navigator.push的时候设置，假如首页和详情页由两个人开发，这是详情页需要修改一下右边按钮的样式，那么这个修改由谁来完成呢？
所以得继续进行改进，我的想法是，如果能在详情页里设置route.title的话，那这个问题就可以解决了。
我们回过头再看看这个例子，里面有个细节：
renderScene={(route, navigator) => {
let Component = route.component;
if(route.component) {
return <Component {...route.params} navigator={navigator} />
}
}}
在设置需要渲染的Scene时候，额外传了一个属性navigator，在下一个页面就可以这样使用：
_pressButton() {
const { navigator } = this.props;
if(navigator) {
navigator.pop();
}
}
通过this.props.navigator就可以获得全局的navigator对象，然后进行操作。仿造他的做法，多传一个属性route，如下：
renderScene={(route, navigator) => {
let scene = <route.component {...route.params} route={route} navigator={navigator}/>;
return scene;
}} />
下一个页面就可以这样设置：
this.props.route.title = '交流圈';
this.props.route.rightButtonTitle = '刷新';
这样就可以在各自的Component内设置title属性了，功能的划分也就更加清晰了。
下面继续完善，在Component内设置按钮的点击事件，先看看Navigator里的代码：
RightButton: function(route, navigator, index, navState) {
return (
<TouchableOpacity
onPress={() => route.rightButton && route.rightButton.clicked()}
style={styles.navBarRightButton}>
<Text style={[styles.navBarText, styles.navBarButtonText]}>
{route.rightButton && route.rightButton.title}
</Text>
</TouchableOpacity>
);
},
重点看onPress的设置，这里设置回调clicked()的时候利用到了短路原理，js的这种用法真的太方便了！。
于是Component内的设置就变成了如下样子：
this.props.route.title = '交流圈';
this.props.route.rightButton = {title: '刷新',
clicked: this._fetchData,};
再对比一下原生写法，是不是非常类似了：
self.title = @"帖子详情";
self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"分享"
style:UIBarButtonItemStylePlain
target:self
action:@selector(share)];
最后，我在Navigator上封装了一层NavigationVC，源码地址如下:
https://github.com/zhou333chen/NavigationVC
PS：我知识按照原生开发的思路进行Navigator的改造，纯属自己捣鼓而已，如有不妥之处，欢迎指正。
网友评论