通过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