你的位置:首页 > 操作系统

[操作系统]React Native知识6


NavigatorIOS包装了UIKit的导航功能,可以使用左划功能来返回到上一界面。本组件并非由Facebook官方开发组维护。这一组件的开发完全由社区主导。如果纯js的方案能够满足你的需求的话,那么我们建议你选择Navigator组件(理论知识可以见React Native中文网)。

一:概念内容

1:路由:一个路由是用于描述导航器中一页的对象。NavigatorIOS的第一个路由通过initialRoute属性来提供。

render: function() { return (  <NavigatorIOS   initialRoute={{    component: MyView,    title: 'My View Title',    passProps: { myProp: 'foo' },   }}  /> );},

现在MyView会被导航器渲染出来。它可以通过route属性获得对应的路由对象,导航器本身,还有所有passProps中传递的属性。 查看initialRoute的propTypes来了解路由(route)的完整定义。

2:导航器:导航器是一个object,包含了一系列导航函数,可供视图调用。它会作为props传递给NavigatorIOS渲染的任何组件。

var MyView = React.createClass({ _handleBackButtonPress: function() {  this.props.navigator.pop(); }, _handleNextButtonPress: function() {  this.props.navigator.push(nextRoute); }, ...});

一个导航器对象包含如下的函数:

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

导航函数也可以从NavigatorIOS的子组件中获得:

var MyView = React.createClass({ _handleNavigationRequest: function() {  this.refs.nav.push(otherRoute); }, render: () => (  <NavigatorIOS   ref="nav"   initialRoute={...}  /> ),});

二:属性

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 

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

9:interactivePopGestureEnabled bool 

决定是否启用滑动返回手势。不指定此属性时,手势会根据navigationBar的显隐情况决定是否启用(显示时启用手势,隐藏时禁用手势)。指定此属性后,手势与navigationBar的显隐情况无关。

三:方法

1:push(route: { component: Function; title: string; passProps?: Object; backButtonTitle?: string; backButtonIcon?: Object; leftButtonTitle?: string; leftButtonIcon?: Object; onLeftButtonPress?: Function; rightButtonTitle?: string; rightButtonIcon?: Object; onRightButtonPress?: Function; wrapperStyle?: any; })  跳转

2:popN(n: number)  返回第N层

3:pop()   返回上一层

4:replaceAtIndex(route: { component: Function; title: string; passProps?: Object; backButtonTitle?: string; backButtonIcon?: Object; leftButtonTitle?: string; leftButtonIcon?: Object; onLeftButtonPress?: Function; rightButtonTitle?: string; rightButtonIcon?: Object; onRightButtonPress?: Function; wrapperStyle?: any; }, index: number)  替换navigation栈的路由,索引指定要替换的堆栈中的路由。如果它是负面的,它从后面计数。

5:replace(route: { component: Function; title: string; passProps?: Object; backButtonTitle?: string; backButtonIcon?: Object; leftButtonTitle?: string; leftButtonIcon?: Object; onLeftButtonPress?: Function; rightButtonTitle?: string; rightButtonIcon?: Object; onRightButtonPress?: Function; wrapperStyle?: any; }) 

替换当前页面的路由,并立即加载新路由的视图。

6:replacePrevious(route: { component: Function; title: string; passProps?: Object; backButtonTitle?: string; backButtonIcon?: Object; leftButtonTitle?: string; leftButtonIcon?: Object; onLeftButtonPress?: Function; rightButtonTitle?: string; rightButtonIcon?: Object; onRightButtonPress?: Function; wrapperStyle?: any; }) 

替换上一页的路由/视图。

7:popToTop()  返回到顶层

8:popToRoute(route: { component: Function; title: string; passProps?: Object; backButtonTitle?: string; backButtonIcon?: Object; leftButtonTitle?: string; leftButtonIcon?: Object; onLeftButtonPress?: Function; rightButtonTitle?: string; rightButtonIcon?: Object; onRightButtonPress?: Function; wrapperStyle?: any; }) 

返回特定路由对象的项目

9:replacePreviousAndPop(route: { component: Function; title: string; passProps?: Object; backButtonTitle?: string; backButtonIcon?: Object; leftButtonTitle?: string; leftButtonIcon?: Object; onLeftButtonPress?: Function; rightButtonTitle?: string; rightButtonIcon?: Object; onRightButtonPress?: Function; wrapperStyle?: any; }) 

替换前面的路由/视图并返回到它。

10:resetTo(route: { component: Function; title: string; passProps?: Object; backButtonTitle?: string; backButtonIcon?: Object; leftButtonTitle?: string; leftButtonIcon?: Object; onLeftButtonPress?: Function; rightButtonTitle?: string; rightButtonIcon?: Object; onRightButtonPress?: Function; wrapperStyle?: any; }) 

取代顶级和并执行poptotop

三:实例代码

import React, { Component } from 'react';import { AppRegistry, StyleSheet, Text, View, TextInput, Alert, Image, TouchableHighlight, TouchableOpacity, NavigatorIOS, ScrollView} from 'react-native';//导航栏class ReactNativeProject extends Component { render() {  return (   <NavigatorIOS style={{flex:1}} initialRoute={{ component:ListPage,title:'首页'}}/>  ); }}//列表页面class ListPage extends Component { render(){ return (  <ScrollView style={styles.flex}>   <Text style={styles.list_item} onPress={this._goToDetailPage.bind(this)}>订单1详情</Text>   <Text style={styles.list_item} onPress={this._goToDetailPage.bind(this)}>订单2详情</Text>   <Text style={styles.list_item} onPress={this._goToDetailPage.bind(this)}>订单3详情</Text>  </ScrollView>  );}_goToDetailPage(){ this.props.navigator.push({  component: DetailPage,  title: '订单详情',  rightButtonTitle: '购物车',  onRightButtonPress: function(){    alert('进入我的购物车');   } });}}//详情页class DetailPage extends Component { _show(text) {  alert(text); } _handleBackButtonPress() {  this.props.navigator.pop(); } render() {  return (   <View style={styles.container}>       <TouchableOpacity         onPress={this._show.bind(this,'React Native')}         activeOpacity={0.5}>         <Text style={styles.item}>React Native</Text>        </TouchableOpacity>        <TouchableOpacity         onPress={this._handleBackButtonPress.bind(this)}>         <Text style={styles.item}>返回上一级页面</Text>        </TouchableOpacity>   </View>  ); }}const styles = StyleSheet.create({ container: {  flex: 1,  marginTop:64 }, item: {  fontSize:18,  marginLeft:5,  color:'#434343' }, flex:{  flex: 1, }, list_item:{  lineHeight:25,  fontSize:16,  marginLeft:10,  marginRight:10 }});AppRegistry.registerComponent('ReactNativeProject', () => ReactNativeProject);

效果图: