搞了一天的RN-導(dǎo)航條了，終于有點(diǎn)成就，特來記錄一下

整體項(xiàng)目目錄如下

index.ios.js是項(xiàng)目的入口
里面的代碼是轉(zhuǎn)到另外一個(gè)入口

B63114D6-9C78-47AE-8DBA-C91FD0DB85CA.png

HomePage.js 是導(dǎo)航條所在的文件
導(dǎo)航條默認(rèn)加載FirstPage.js文件

HomePage.js

首先是創(chuàng)建navigator

//這種是帶導(dǎo)航條的
 render() {

            return (
            <Navigator
              initialRoute={{ name: 'FirstPageComponent', component: FirstPageComponent }}//默認(rèn)加載的頁面
              configureScene={this.configureScene}
              renderScene={this.renderScene}
              style={{flex:1}}
              navigationBar={
                  <Navigator.NavigationBar style={homePageStyle.navStyleBase}
                  routeMapper={NavigationBarRouteMapper}/>}
            />
            );
        }

//這種是不帶導(dǎo)航條的
 render() {

            return (
            <Navigator
              initialRoute={{ name: 'FirstPageComponent', component: FirstPageComponent }}//默認(rèn)加載的頁面
              configureScene={this.configureScene}
              renderScene={this.renderScene}
              style={{flex:1}}
            />
            );
        }

configureScene:配置動(dòng)畫

//這是所有的動(dòng)畫，具體效果可以一一嘗試
 /**                 配置跳轉(zhuǎn)動(dòng)畫
     *  - Navigator.SceneConfigs.PushFromRight (default)
     *  - Navigator.SceneConfigs.FloatFromRight
     *  - Navigator.SceneConfigs.FloatFromLeft
     *  - Navigator.SceneConfigs.FloatFromBottom
     *  - Navigator.SceneConfigs.FloatFromBottomAndroid
     *  - Navigator.SceneConfigs.FadeAndroid
     *  - Navigator.SceneConfigs.HorizontalSwipeJump
     *  - Navigator.SceneConfigs.HorizontalSwipeJumpFromRight
     *  - Navigator.SceneConfigs.VerticalUpSwipeJump
     *  - Navigator.SceneConfigs.VerticalDownSwipeJump
     */
    configureScene(route) {

        return Navigator.SceneConfigs.FloatFromRight

    }

renderScene:我們可以在該方法中設(shè)置需要渲染的場(chǎng)景（跳轉(zhuǎn)的頁面），該方法接收兩個(gè)參數(shù)（必要參數(shù)），route和navigator，其中route就是路由的頁面，navigator是一個(gè)Navigator對(duì)象，因?yàn)镹avigator對(duì)象擁有pop，push，jump等方法，我們需要導(dǎo)航器對(duì)象來實(shí)現(xiàn)頁面的跳轉(zhuǎn)。而路由route需要我們提前進(jìn)行配置

 renderScene(route, navigator) {
         return <route.component navigator={navigator} />
    }

然后配置導(dǎo)航條的標(biāo)題、左按鈕、右按鈕

var NavigationBarRouteMapper = {
    // 標(biāo)題
    Title(route, navigator, index, navState) {
        return (
            <View>
                <Text style={homePageStyle.navTitleStyle}>
                    應(yīng)用標(biāo)題
                </Text>
            </View>
        );
    },
    // 左鍵
    LeftButton(route, navigator, index, navState) {
        if (index > 0) {
            return (
                <View>
                    <TouchableOpacity
                        underlayColor='transparent'
                        onPress={() => {
                            if (index > 0) {
                                navigator.pop()
                            }
                        }}>
                        <Text style={homePageStyle.navLeftButtonStyle}>
                            返回
                        </Text>
                    </TouchableOpacity>
                </View>
            );
        } else {
            return null;
        }
    },
    RightButton(route, navigator, index, navState) {
        if (route.onPress)
            return (
                <View>
                    <TouchableOpacity
                        onPress={() => route.onPress()}>
                        <Text style={homePageStyle.navRightButtonStyle}>
                            right
                        </Text>
                    </TouchableOpacity>
                </View>
            );
    },

};

樣式

const homePageStyle = StyleSheet.create({
    textStyleBase:{
        marginTop:40,
        marginHorizontal:20,
        color:'red',
        textAlign:'center',
    },
    navStyleBase:{
      backgroundColor:'blue',
    },
    navTitleStyle:{
        color:'white',
        textAlign:'center',
        flex:1,
        fontSize:18,
        fontWeight:'bold',
        marginVertical:5,
    },
    navLeftButtonStyle:{
        color:'white',
        marginLeft:10,
        fontSize:15,
        marginTop:5,
    },
    navRightButtonStyle:{
        color:'black',
        marginRight:10,
        fontSize:15,

    },

});

FirstPage.js

import SecondPageComponent from './SecondPage'

 //點(diǎn)擊第一頁，跳轉(zhuǎn)到第二個(gè)頁面
     goPage2() {
         this.props.navigator.push({
              component:SecondPageComponent,//指定跳轉(zhuǎn)到第二個(gè)頁面
         })
     }
     

    render() {
        return (
            <View style={firstPageStyle.viewStyleBase}>

                <TouchableOpacity style={firstPageStyle.opacityStyleBase} onPress={() => this.goPage2()}>
                    <Text style={firstPageStyle.textStyleBase}>第一頁</Text>
                </TouchableOpacity>

               
            </View>
        )

    }

}

樣式

const firstPageStyle = StyleSheet.create({
    textStyleBase:{
        color:'green',
        textAlign:'center',
    },
    viewStyleBase:{
        backgroundColor:'red',
        flex:1,
    },
    opacityStyleBase:{
        flex:1,
        marginTop:100,
    },
});

SenondPage.js

//返回第一頁
backPage1() {

        this.props.navigator.pop()
    }

    render() {
        return (
            <View style={firstPageStyle.viewStyleBase}>
                <TouchableOpacity onPress={() => this.backPage1()}>
                        <Text style={firstPageStyle.textStyleBase}>第二頁</Text>

             
            </View>
        )

    }

樣式

const firstPageStyle = StyleSheet.create({
    textStyleBase:{
        marginTop:100,
        marginHorizontal:20,
        color:'green',
        textAlign:'center',
    },
    viewStyleBase:{
        backgroundColor:'blue',
        flex:1,
    },
});

這樣，就可以進(jìn)行頁面的push了

navgif.gif

項(xiàng)目地址：https://github.com/chjwrr/RN-NatigatorTest