通过Navigator实现页面的跳转
一、在index.android.js中，添加Navigator（ios中也需要写，所以最好单独抽出来）
首先导入Navigator
import {Navigator} from "react-native-deprecated-custom-components";
具体实现：
component：Launch 设置首先要显示的欢迎页页面
render() {
//返回
return (
<Navigator
initialRoute={{name:'启动页',component:Launch}}
configureScene={()=>{
return Navigator.SceneConfigs.PushFromRight;
}}
renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.props} navigator={navigator} />
}}
/>
);
}
二、欢迎页面
显示一张图片，三秒后跳转到首页，主要代码：
//复杂的操作： 定时器 网络请求
componentDidMount(){
//定时：隔2s切换到main
setTimeout(()=>{
//页面的切换
this.props.navigator.replace({
component:Main,//具体路由的板块
});
},3000);
}
三、在首页中，实现详情页面的跳转
在首页中，首先实现底部五个按钮点击后页面之间的切换，在切换是，需要将index.android.js中的navigator传递过去
<TabNavigator hidesTabTouch={true} tabBarStyle={styles.tab}>
{this._renderTabItem('首页',HOME_NORMAL, HOME_FOCUS, HOME, <HomeMain navigator={ this.props.navigator}/>)}
{this._renderTabItem('分类',CATEGORY_NORMAL, CATEGORY_FOCUS, CATEGORY, <CategoryMain navigator={ this.props.navigator}/>)}
{this._renderTabItem('精选',FAXIAN_NORMAL, FAXIAN_FOCUS, FAXIAN, <ChoicenessMine navigator={ this.props.navigator}/>)}
{this._renderTabItem('购物车',CART_NORMAL, CART_FOCUS, CART, <CarMain navigator={ this.props.navigator}/>)}
{this._renderTabItem('我的',MINE_NORMAL, MINE_FOCUS, MINE, <MineMain navigator={ this.props.navigator}/>)}
</TabNavigator>
例如，在第一个页面首页HomeMain中，实现点击某一项，跳转到详情页：
实现跳转功能代码：
//跳转到二级界面
_pushToDetail(view, text) {
this.props.navigator.push(
{
component: view,//要跳转的板块
props: {
title: text,//要传递的参数
}
}
);
}
注：在props写入要传递的参数，props必须与index.android.js中的一致
QQ图片20170808172836.png
四、实现页面的返回
this.props.navigator.pop();
在安卓手机中，如果用户通过点击物理返回键返回时，若返回时需要进行某些操作，需要时间对按键的监听，具体实现：
componentDidMount() {
this.setState({title: this.props.title});
if (Platform.OS === 'android') {
BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid);
}
}
onBackAndroid = () => {
const nav = this.props.navigator;
const routers = nav.getCurrentRoutes();
if (routers.length > 1) {
nav.pop();
return true;
}
return false;
};
五、实现有回传值的返回
在跳转页面：
var _this = this;
this.props.navigator.push(
{
component: nextView,//要跳转的板块
props: {
title:text,//要传递的参数
//回调!获取回传的user
getUser: function(user) {
Toast.info(user,1);//弹出接收到的值
_this.setState({name:user})
}
}
}
);
在返回页面：
if (this.props.getUser) {
let user = "注册成功";
//回调传值给上个页面
this.props.getUser(user);
}
this.props.navigator.pop();
注意：在跳转页面中，如果要setState(),必须要重新定义一下this,否则报错*
六、其他===其他===其他
有些网上在实现页面跳转，例如首页跳转到详情页，会出现点击跳转到详情页后，底部的导航栏没有跟着动，上面是详情页，下面是首页中底下的五个切换按钮，所以看着很别扭。原因是因为，在实现五个页面切换时，在子view中重新声明Navigator，导致中间的view进行跳转切换，而不是与所在的Main页面进行切换。具体代码：
QQ图片20170808180056.png
