React Native知識6-NavigatorIOS組件，reactnative組件

React Native知識6-NavigatorIOS組件，reactnative組件

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

：