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