React Native知識6-NavigatorIOS組件

NavigatorIOS包裝了UIKit的導航功能，可以使用左劃功能來返回到上一界面。本組件並非由Facebook官方開發組維護。這一組件的開發完全由社區主導。如果純js的方案能夠滿足你的需求的話，那麼我們建議你選擇Navigator組件（理論知識可以見React Native中文網）。一：概念內 ...

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

效果圖：