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