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,Title(route,navState) { return ( <View style={{ flex: 1,justifyContent:'center',alignItems:'center',}}> <Text style={{color: 'white',backgroundColor: '#ffffff',}}> 登录 </Text> </View> ); } };

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!