React Native Android Navigator的使用

React Native Android Navigator的使用

一. 首先在 index.Android.js 中

  render: function() {
    return (

        <Navigator

          initialRoute={{id: 'NewsList', name: 'Index'}}// 初始化 route 中的数据
          renderScene={this.renderScene.bind(this)}
          // 配置路由方法  renderScene
          //可选的函数，用来配置场景动画和手势。会带有一个路由参数调用，然后它应当返回一个场景配置对象
          configureScene={(route) => {

            if (route.sceneConfig) {
              return route.sceneConfig;
            }
            return Navigator.SceneConfigs.FloatFromRight;
          }} />

    );
  }

在 renderScene 方法中 配置路由

 renderScene(route, navigator) {
    var routeId = route.id;
    if (routeId === 'NewsList') {

      return (
      // 将 navigator 
        <NewsList name  传递给下个页面  
          navigator={navigator} name={route.name} />
      );
    }else if(routeId === 'NewsLists'){
      return(
            <NewsList2
            navigator={navigator}  />
            );
    }//未配置路由 
        return this.noRoute(route,navigator);
  },

3 未配置路由的方法 显示一个提示的页面 ,

  noRoute(navigator) {
    return (
      <View style={{flex: 1, alignItems: 'stretch', justifyContent: 'center'}}>
        <TouchableOpacity style={{flex: 1, alignItems: 'center', justifyContent: 'center'}}
            onPress={() => navigator.pop()}>
          <Text style={{color: 'red', fontWeight: 'bold'}}>请在 index.js 的 renderScene 中配置这个页面的路由</Text>
        </TouchableOpacity>
      </View>
    );
  },

1. 在 newsList.js 中

// 返回到新的页面  
  this.props.navigator.pop();
// 跳转到新的页面 
this.props.navigator.push({
      id: 'PersonPage',
      name: '我的主页',
    });

更多参考 http://react-native.cn/docs/navigator.html#content

例子下载

感谢 文同学 帮助解决数据传递
感谢 天地之灵同学 纠正错误

添加 NavigationBar 好像是因为版本的问题 title 是没办法居中 版本0.16.00

在render 中

<Navigator
          renderScene={this.renderScene.bind(this)}
          navigationBar={
            <Navigator.NavigationBar style={{backgroundColor: '#246dd5',
             alignItems: 'center'}}
                routeMapper={NavigationBarRouteMapper} />
          } />

最外面 定义 NavigationBarRouteMapper

var NavigationBarRouteMapper = {
  LeftButton(route, navigator, index, navState) {
    return null;
  },
  RightButton(route, navigator, index, navState) {
    return null;
  },
  Title(route, navigator, index, navState) {
    return (
        <View style={{   flex: 1,justifyContent:'center',alignItems:'center',}}>
        <Text style={{color: 'white',
         backgroundColor: '#ffffff',}}>
          登录
        </Text>
        </View>

    );
  }
};