一、创建Navigator

1.创建不带导航条的

 render() {

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

2.创建带导航条的

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

3.常见的动画

//这是所有的动画，具体效果可以一一尝试
 /**                 配置跳转动画
     *  - 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

    }

4.配置导航条的左右按钮

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,

    },

});

5.跳转和返回

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

// 返回
backPage1() {

        this.props.navigator.pop()
    }