React-Native-Navigator导航条（一）

搞了一天的RN-导航条了，终于有点成就，特来记录一下

整体项目目录如下

index.ios.js是项目的入口
里面的代码是转到另外一个入口

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

HomePage.js 是导航条所在的文件
导航条默认加载FirstPage.js文件

HomePage.js

首先是创建navigator

//这种是带导航条的
 render() {

            return (
            <Navigator
              initialRoute={{ name: 'FirstPageComponent', component: FirstPageComponent }}//默认加载的页面
              configureScene={this.configureScene}
              renderScene={this.renderScene}
              style={{flex:1}}
              navigationBar={
                  <Navigator.NavigationBar style={homePageStyle.navStyleBase}
                  routeMapper={NavigationBarRouteMapper}/>}
            />
            );
        }

//这种是不带导航条的
 render() {

            return (
            <Navigator
              initialRoute={{ name: 'FirstPageComponent', component: FirstPageComponent }}//默认加载的页面
              configureScene={this.configureScene}
              renderScene={this.renderScene}
              style={{flex:1}}
            />
            );
        }

configureScene:配置动画

//这是所有的动画，具体效果可以一一尝试
 /**                 配置跳转动画
     *  - 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:我们可以在该方法中设置需要渲染的场景（跳转的页面），该方法接收两个参数（必要参数），route和navigator，其中route就是路由的页面，navigator是一个Navigator对象，因为Navigator对象拥有pop，push，jump等方法，我们需要导航器对象来实现页面的跳转。而路由route需要我们提前进行配置

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

然后配置导航条的标题、左按钮、右按钮

var NavigationBarRouteMapper = {
    // 标题
    Title(route, navigator, index, navState) {
        return (
            <View>
                <Text style={homePageStyle.navTitleStyle}>
                    应用标题
                </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'

 //点击第一页，跳转到第二个页面
     goPage2() {
         this.props.navigator.push({
              component:SecondPageComponent,//指定跳转到第二个页面
         })
     }
     

    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,
    },
});

这样，就可以进行页面的push了

navgif.gif

项目地址：https://github.com/chjwrr/RN-NatigatorTest