react native 导航器 Navigator 简单的例子

最近学习react native 是在为全栈工程师而努力，看网上把react native说的各种好，忍不住学习了一把。总体感觉还可以，特别是可以开发android和ios这点非常厉害，刚开始入门需要学习的还有很多。

react native的导航器 Navigator 就像是网页的路由，官方给的有点看不明白，试了好几次才成功，在这里整理一下。

首先在生成的项目里建一个文件MyScene.js，这个也可以不用建，这个只是把跳转后的内容包含进来用而已，如果建了文件，则文件里的内容是：

import React, { Component, PropTypes } from 'react';
import { Navigator, Text, TouchableHighlight,
AppRegistry, View } from 'react-native';

//class MyScene extends Component {这种定义的类是在不包含的时候用
//export default class MyScene extends Component {这种定义的方法是在包含此文件的时候用
export default class MyScene extends Component {
static propTypes = {
title: PropTypes.string.isRequired,
onForward: PropTypes.func.isRequired,
onBack: PropTypes.func.isRequired,
}
render() {
return (
<View>
<Text>Current Scene: { this.props.title }</Text>
<TouchableHighlight onPress={this.props.onForward}>//单击事件回调
<Text>Tap me to load the next scene</Text>
</TouchableHighlight>
<TouchableHighlight onPress={this.props.onBack}>
<Text>Tap me to go back</Text>
</TouchableHighlight>
</View>
)
}
}

然后在index.android.js的文件里写：

import React, { Component, PropTypes } from 'react';
import { Navigator, Text, TouchableHighlight,
AppRegistry, View } from 'react-native';

import MyScene from './MyScene';//引入刚刚建好的文件。

export default class MyProject extends Component {

render() {
return (
<Navigator
initialRoute={{ title: 'My Initial Scene', index: 0 }}
renderScene={(route, navigator) =>
<MyScene
title={route.title}

// Function to call when a new scene should be displayed
onForward={ () => { //定义点击向前的函数内容
const nextIndex = route.index + 1;
navigator.push({
title: 'Scene ' + nextIndex,
index: nextIndex,
});
}}

// Function to call to go back to the previous scene
onBack={() => {//定义返回的函数
if (route.index > 0) {
navigator.pop();
}
}}
/>
}
/>
)
}
}

AppRegistry.registerComponent('MyProject', () => MyProject);//这句话一定要加上

最后的效果：