本文纯原创，纯手打，请大神多多指教。转载请注明出处！
react-native版本：0.48; 开发环境win10+VScode; 目标平台：安卓; 最后更新时间：2017.09.23;
说到reactnative中页面跳转官网中已经有（使用导航器跳转页面）
官方在文章中建议我们使用第三方的react-navigation库
图片.png
使用这个库进行页面跳转很简单代码如下
index.android.js文件
import {
AppRegistry,
} from 'react-native';
import {StackNavigator} from 'react-navigation'
import ViewOne from './app/test/route/ViewOne'
import ViewTow from './app/test/route/ViewTow'
import ViewThree from './app/test/route/ViewThree'
const test = StackNavigator({
One:{screen:ViewOne},
Tow:{screen:ViewTow},
Three:{screen:ViewThree},
})
AppRegistry.registerComponent('test', () => test);
ViewOne.js文件
import React, { Component } from 'react';
import {
Button,
View,
Text,
} from 'react-native'
class ViewOne extends Component {
static navigationOptions = {
headerTitle:'ViewOne'
}
render() {
return (
<View>
<Button
onPress={() => { this.props.navigation.navigate('Tow') }}
title='点击进入ViewTow'
/>
</View>
)
}
}
export default ViewOne;
ViewTow.js文件
import React, { Component } from 'react';
import {
Button
} from 'react-native'
import { NavigationActions } from 'react-navigation'
class ViewTow extends Component {
// 这些注释全部是navigationOptions的属性 navigationOptions是标题栏
// title：标题，如果设置了这个导航栏和标签栏的title就会变成一样的，所以不推荐使用这个方法。
// header：可以设置一些导航的属性，当然如果想隐藏顶部导航条只要将这个属性设置为null就可以了。
// headerTitle：设置导航栏标题，推荐用这个方法。
// headerBackTitle：设置跳转页面左侧返回箭头后面的文字，默认是上一个页面的标题。可以自定义，也可以设置为null
// headerTruncatedBackTitle：设置当上个页面标题不符合返回箭头后的文字时，默认改成"返回"。（上个页面的标题过长，导致显示不下，所以改成了短一些的。）
// headerRight：设置导航条右侧。可以是按钮或者其他。
// headerLeft：设置导航条左侧。可以是按钮或者其他。
// headerStyle：设置导航条的样式。背景色，宽高等。如果想去掉安卓导航条底部阴影可以添加elevation: 0，iOS下用shadowOpacity: 0。
// headerTitleStyle：设置导航条文字样式。安卓上如果要设置文字居中，只要添加alignSelf:'center'就可以了
// headerBackTitleStyle：设置导航条返回文字样式。
// headerTintColor：设置导航栏文字颜色。总感觉和上面重叠了。
// headerPressColorAndroid：安卓独有的设置颜色纹理，需要安卓版本大于5.0
// gesturesEnabled：是否支持滑动返回手势，iOS默认支持，安卓默认关闭
static navigationOptions = {
headerTitle: 'ViewTow'
}
render() {
return (
<Button
onPress={() => {
this.props.navigation.navigate('Three')
}}
title='点击进入ViewThree'
/>
)
}
}
export default ViewTow;
ViewThree.js
import React, {Component} from 'react';
import {
Button
} from 'react-native'
class ViewThree extends Component{
static navigationOptions = {
headerTitle:'ViewThree'
}
render(){
return (<Button title='ViewThree'/>)
}
}
export default ViewThree;
上面几个文件运行效果如下
这里写图片描述
如果你想第一个页面打开第二个页面，或者打开多个页面后 关闭其他页面 只保留打开的页面
也就是打开一个页面，关闭当前页面
我下面吧ViewTow.js文件中的render代码改一下
render() {
return (
<Button
onPress={() => {
//重构路由页面
let resetActiom = NavigationActions.reset({
index: 0,//默认打开actions中的第几个页面
actions: [//actions是页面集合
//NavigationActions.navigate({ routeName: 'One' }),
//NavigationActions.navigate({ routeName: 'Tow' }),
NavigationActions.navigate({ routeName: 'Three' })//这里有几个就保留几个，点击完成后就会重构导航器
]
})
this.props.navigation.dispatch(resetActiom)
}}
title='点击进入ViewThree'
/>
)
}
我在重构路由后只保留一个界面，运行效果如下
这里写图片描述
你会发现点击进入第三个界面后 返回箭头消失了，无法返回第一和第二个界面了
