React-Native学习十八：Navigator

时间：2021-07-23 18:58:44
Navigator处理你的app中不同页面的切换。它使用JavaScript实现，在iOS和Android中都可用。如果仅仅用于iOS，你也可以使用NavigatorIOS，因为它使用的是本地的UIKit导航；
一、属性和方法
名称
类型
说明
initialRoute object 导航的初始route（第一个显示的）；
initialRouteStack object 导航的route集合，如果initialRoute没有设置，这个属性是必填的。如果这个属性没有，它将会默认传递一个仅仅包含initialRoute的集合；
renderScene function 必填的方法，它根据给定的ruote渲染夜间，将被使用route和navigator对象参数调用；
navigationBar view 导航的可选组件导航标题栏，需要设置左按钮，右按钮和标题属性。这个组件将会获取两个属性：navigator和navState代表导航组件和它的状态。这个组件当ruote改变的时候会重新渲染；
configureScene function 可选的方法，你可以通过它配置页面切换的动画和手势。将会使用route和routeStack参数调用，route代表导航当前显示的页面，routeStack是导航当前展示的route集合；

二、实例
index.android.js文件： 
'use strict';var React = require('react');
var ReactNative = require('react-native');

var {
  AppRegistry,
  StyleSheet,
  Navigator,
  Text,
  Image,
  TouchableOpacity,
} = ReactNative;

//引入子页面
var Page1 = require('./Page1');
var Page2 = require('./Page2');
var Page3 = require('./Page3');

//设置导航栏
var NavigationBarRouteMapper = {
  //设置导航栏左按钮
  LeftButton: function(route,navigator,index,navState) {
    if(index === 0){
      return null;
    }else{
      return(
        <TouchableOpacity style={styles.navBarLeftButton} onPress={()=>{try{navigator.jumpBack();}catch(error){}}}>
          <Text style={[styles.navBarText, styles.navBarButtonText]}>Back</Text>
        </TouchableOpacity>
      );
    }
  },

  //设置导航栏标题
  Title: function(route,navigator,index,navState) {
    return (<Text style={[styles.navBarText, styles.navBarTitleText]}>{route.title}</Text>);
  },

  //设置导航栏右按钮
  RightButton: function(route,navigator,index,navState) {
    if(index === navState.routeStack.length - 1){
      return null;
    }else{
       return(
         <TouchableOpacity style={styles.navBarRightButton} onPress={()=>{navigator.jumpForward();}}>
           <Text style={[styles.navBarText, styles.navBarButtonText]}>Next</Text>
         </TouchableOpacity>
       );
    }
  }
};

var MyAwesomeApp = React.createClass ({
  //设置导航子页面切换动画
  configureScence: function(route) {
    return Navigator.SceneConfigs.FadeAndroid;
  },

  //设置导航子页面导航路由方式
  renderScene: function(route, navigator) {
    this._navigator = navigator;
    switch(route.name) {
      case 'Page1':
        return <Page1 navigator={navigator}/>;
      case 'Page2' :
        return <Page2 navigator={navigator} />;
      case 'Page3' :
        return <Page3 navigator={navigator} />;
    }
  },

  render: function() {
    const routes = [
      {name: 'Page1', title: 'Title1', index: 0},
      {name: 'Page2', title: 'Title2', index: 1},
      {name: 'Page3', title: 'Title3', index: 2},
    ];

    return( 
      //返回导航栏视图，并通过initialRoute显示第一次显示的子页面，initialRouteStack导航栏的子页面路由栈，configureScence导航栏子页面切换动画，navigationBar导航栏标题栏实现，renderScene导航栏路由方式
      <Navigator
        style={styles.nav}
        initialRoute={routes[0]}
        initialRouteStack={routes}
        configureScence={this.configureScence}
        navigationBar={<Navigator.NavigationBar style={styles.navBar} routeMapper={NavigationBarRouteMapper}/>}
        renderScene={this.renderScene}/>
    );
  }
});

var styles = StyleSheet.create({
  nav: {
     flex: 1,
  },
  navBar: {
    backgroundColor: 'white',
  },
  navBarText: {
    fontSize: 16,
    marginVertical: 10,
  },
  navBarTitleText: {
    color: '#373E4D',
    fontWeight: '500',
    marginVertical: 9,
    marginLeft: 103,
  },
  navBarLeftButton: {
    paddingLeft: 10,
  },
  navBarRightButton: {
    paddingRight: 10,
  },
  navBarButtonText: {
    color: '#5890FF',
  },
});

AppRegistry.registerComponent('MyAwesomeApp', () => MyAwesomeApp);
Page1.js文件（其它Page2.j、Page3.js代码类似） 
'use strict';var React = require('react');var ReactNative = require('react-native');var {  StyleSheet,  View,  Text,} = ReactNative;var Page1 = React.createClass ({  render: function() {    return(        <View style={styles.container}>          <Text style={styles.pagetext}>page1Content</Text>        </View>    );  }});var styles = StyleSheet.create({  container: {    flex: 1,    alignItems: 'center',    justifyContent: 'center',  },  pagetext: {    fontSize: 16,     fontWeight: '500',  }});module.exports = Page1;
三、运行结果：
  
注意：在实际的开发过程中，你可能需要在不同的页面（route）之间进行传值，比如选择图片组，将选中的图片组的信息传递到图片组预览页面。实现如下：
1.修改路由定义，添加传递数值的字段；
 

 const routes = [      {name: 'MyHotel', title: '我的酒店', index: 0},       ... ...      //photosGroup路由之间传递的值      {name: 'SelectPhoto', title: '选择相片', index: 5, photosGroup:''},    ];
2.在使用navigator.push中传递photosGroup给renderScene方法处理； 
this.props.navigator.push({name: "SelectPhoto",title:photosGroup.name,photosGroup:photosGroup});
3.需改renderScene函数，将route中的传递信息，以属性传递给下一个页面组件； 
  renderScene: function(route, navigator) {    this._navigator = navigator;    switch(route.name) {      case 'MyHotel':        return <MyHotel navigator={navigator}/>;      ... ...      case 'SelectPhoto' :        //将route中传递的值photosGroup，以属性photosGroup传递给新的页面组件SelectPhoto        return <SelectPhoto navigator={navigator} photosGroup={route.photosGroup}/>;    }  },
4.在子页面，使用this.props. photosGroup就可以访问路由之间传递的数据；
 
render: function() {    return(      <View style={styles.container}>        <Text style={styles.pagetext}>{this.props.photosGroup.name}</Text>        <Text style={styles.pagetext}>{this.props.photosGroup.count}</Text>        <Text style={styles.pagetext}>{this.props.photosGroup.imageUri}</Text>      </View>    );  }

新技术，新未来！欢迎大家关注 “1024工场”微信服务号 ，时刻关注我们的最新的技术讯息！ （甭客气！尽情的扫描或者长按！）
React-Native学习十八：Navigator

标签：

相关文章