React Native——使用导航Navigator and NavigatorIOS

jopen 9年前

一、Navigator

1、简单介绍:大多数时候我们都需要导航器来应对不同场景(页面)间的切换。它通过路由对象来分辨不同的场景,我们这里采用的就是 renderScene 方法,根据指定的路由来渲染。

2、利用Navigator弹出用到的方法:

(1 initialRoute ={{ name: 'home', component: HomeScene }} 这个指定了默认的页面,也就是启动的组件页面

(2 configureScene ={() => {

return Navigator. SceneConfigs .HorizontalSwipeJump;

}}

这个是页面之间跳转时候的动画,可以看这个目录:

node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js(可以看其他跳转的时候的方向)

(3 renderScene :两个参数中的route包含的事initial的时候传递的name和component,而navigator是一个我们需要用的Navigator的对象,所以当我们拿到route中的component的时候,我们就可以将navigator传递给它,正因为如此,我们的组件HomeScene才可以通过  this.props.navigator,拿到路由。

(4 如果需要传参数,则在push的参数后面加多一个参数 params ,把JSON往死填就好了,这里的params,其实就是在renderScene中return的{...route.params},这样接收的页面只需要通过this.props.id,就可以拿到我们传递的参数

(5 OK,那参数怎么回传呢?回调!通过定义一个回调函数,利用this.props 去调用,把参数回传回来

完整代码:

/**   * Sample React Native App   * https://github.com/非死book/react-native   */  'use strict';    var React = require('react-native');  //增加NavigatorIOS  var {    AppRegistry,    StyleSheet,    Text,    View,    Navigator,    TouchableHighlight,  } = React;      /*--  启动组件 --*/  var MainClass = React.createClass({      render: function() {      //component这里设置的是这个组件启动的时候显示的第一个子组件      return (        <Navigator            style= {styles.container}            initialRoute= {{              component: HomeScene,              name: 'home'            }}            configureScene={() => {                return Navigator.SceneConfigs.HorizontalSwipeJump;            }}            renderScene={(route, navigator) => {              let Component = route.component;              if(route.component) {                return <Component {...route.params} navigator={navigator} />              }            }} >          </Navigator>      );    },  });    /*--  首页页面组件 --*/  var HomeScene = React.createClass({    getInitialState:function () {      return {        id: 'AXIBA001',        flag: null      };    },    render: function() {      return (        <View style={styles.home}>          <TouchableHighlight onPress={this.onPress}>            <Text>push me!{this.state.flag && ' I \'m ' + this.state.flag + ', i come from second page'}</Text>          </TouchableHighlight>        </View>      );    },    onPress: function() {      var _me = this;      //或者写成 const navigator = this.props.navigator;      const { navigator } = this.props;      if(navigator)      {          navigator.push({              name: 'touch View',              component: SecondScene,              params: {                  id: this.state.id,                  getSomething:function(flag) {                    _me.setState({                      flag: flag                    });                  }              }           })      }    }  });  /*--  push后的页面组件 --*/  var SecondScene = React.createClass({    render: function() {      return (        <View style={styles.home}>          <TouchableHighlight onPress={this.onPress}>            <Text>push sucess!I get {this.props.id},i want back!</Text>          </TouchableHighlight>        </View>      );    },    onPress: function() {      //或者写成 const navigator = this.props.navigator;      const { navigator } = this.props;        if(this.props.getSomething) {        var flag = 'Axiba002'        this.props.getSomething(flag);      }      if(navigator) {        navigator.pop();      }    }  });    /*布局样式*/  var styles = StyleSheet.create({    container: {      flex: 1,      // justifyContent: 'center',      // alignItems: 'center',      backgroundColor: '#F5FCFF',    },    home: {      paddingTop:74,      },  });    AppRegistry.registerComponent('AwesonProject', () => MainClass);

补充一些可能会用到的Navigator方法:

  • getCurrentRoutes() - 获取当前栈里的路由,也就是push进来,没有pop掉的那些。
  • jumpBack() - 跳回之前的路由,当然前提是保留现在的,还可以再跳回来,会给你保留原样。
  • jumpForward() - 上一个方法不是调到之前的路由了么,用这个跳回来就好了。
  • jumpTo(route) - 跳转到已有的场景并且不卸载。
  • push(route) - 跳转到新的场景,并且将场景入栈,你可以稍后跳转过去
  • pop() - 跳转回去并且卸载掉当前场景
  • replace(route) - 用一个新的路由替换掉当前场景
  • replaceAtIndex(route, index) - 替换掉指定序列的路由场景
  • replacePrevious(route) - 替换掉之前的场景
  • immediatelyResetRouteStack(routeStack) - 用新的路由数组来重置路由栈
  • popToRoute(route) - pop到路由指定的场景,其他的场景将会卸载。
  • popToTop() - pop到栈中的第一个场景,卸载掉所有的其他场景。

二、NavigatorIOS

1、NavigatorIOS包装了UIKit的导航功能,可以使用左划功能来返回到上一界面。

2、同上包含的方法有:

  • push(route)  - 导航器跳转到一个新的路由。
  • pop()  - 回到上一页。
  • popN(n)  - 回到N页之前。当N=1的时候,效果和 pop() 一样。
  • replace(route)  - 替换当前页的路由,并立即加载新路由的视图。
  • replacePrevious(route)  - 替换上一页的路由/视图。
  • replacePreviousAndPop(route)  - 替换上一页的路由/视图并且立刻切换回上一页。
  • resetTo(route)  - 替换最顶级的路由并且回到它。
  • popToRoute(route)  - 一直回到某个指定的路由。
  • popToTop()  - 回到最顶层的路由。

代码:

/**   * Sample React Native App   * https://github.com/非死book/react-native   */  'use strict';    var React = require('react-native');  //增加NavigatorIOS  var {    AppRegistry,    StyleSheet,    Text,    View,    NavigatorIOS,    TouchableHighlight,  } = React;  /*有这样一些需求?:自定义barBarItem,例如自定义名字、图片?*/    /*--  启动组件 --*/  var MainClass = React.createClass({      onRightButtonPress:function(){      this.refs.nav.push({        title: 'push view',        component: SecondScene,      });    },    render: function() {      //component这里设置的是这个组件启动的时候显示的第一个子组件      return (        <NavigatorIOS ref='nav'                      style= {styles.container}                      initialRoute= {{                        component: HomeScene,                        title: 'home',                        rightButtonTitle: 'more',                        onRightButtonPress: this.onRightButtonPress,                      }}>          </NavigatorIOS>      );    },  });    /*--  首页页面组件 --*/  var HomeScene = React.createClass({    render: function() {      return (        <View style={styles.home}>          <TouchableHighlight onPress={this.onPress}>            <Text>push me!</Text>          </TouchableHighlight>        </View>      );    },    onPress: function() {      this.props.navigator.push({        title: 'touch View',        component: SecondScene,        passProps: { myProp: 'Axiba001' },      });    }    });  /*--  push后的页面组件 --*/  var SecondScene = React.createClass({    render: function() {      return (        <View style={styles.home}>          <Text>push sucess!{'hi,this is prams:'+ this.props.myProp}</Text>        </View>      );    },  });    /*布局样式*/  var styles = StyleSheet.create({    container: {      flex: 1,      // justifyContent: 'center',      // alignItems: 'center',      backgroundColor: '#F5FCFF',    },    home: {      paddingTop:74,      },  });    AppRegistry.registerComponent('AwesonProject', () => MainClass);

回调函数基本相同,但是注意还有一些对导航栏的控制,例如:

(1 barTintColor string 

导航条的背景颜色。

(2 initialRoute {component: function, title: string, passProps: object, backButtonIcon: Image.propTypes.source, backButtonTitle: string, leftButtonIcon: Image.propTypes.source, leftButtonTitle: string, onLeftButtonPress: function, rightButtonIcon: Image.propTypes.source, rightButtonTitle: string, onRightButtonPress: function, wrapperStyle: [object Object]} 

NavigatorIOS使用"路由"对象来包含要渲染的子视图、它们的属性、以及导航条配置。"push"和任何其它的导航函数的参数都是这样的路由对象。

(3 itemWrapperStyle View#style

导航器中的组件的默认属性。一个常见的用途是设置所有页面的背景颜色。

(4 navigationBarHidden  bool 

一个布尔值,决定导航栏是否隐藏。

( 5 shadowHidden bool 

一个布尔值,决定是否要隐藏1像素的阴影

( 6 tintColor string 

导航栏上按钮的颜色。

( 7 titleTextColor string 

导航器标题的文字颜色。

(8 translucent bool 

一个布尔值,决定是否导航条是半透明的。

</div>

来自: http://www.cnblogs.com/daomul/p/5125197.html