React Native填坑之旅--Navigation篇

React Native的導航有兩種，一種是iOS和Android通用的叫做Navigator，一種是支持iOS的叫做NavigatorIOS。我們這裏只討論通用的Navigator。會了Navigator，NavigatorIOS也就不是什麼難事了。

本文所使用的是React Native 0.34。FB團隊更新的太快了，我會在後續出現大的改動的時候更新本文以及代碼。

Navigator基礎

Navigator在不同的Scene之間跳轉。
* initialRoute對象
這是Navigator所必須的，用於指定第一個Scene。

renderScene方法，這個方法必須。用flow的語法來描述的話是這樣的renderScene(router: any, navigator: Navigator)。renderScene方法用來根據一個給定的route來繪製Scene。如：

(route, navigator) => {
      <MySceneComponent title={route.title} navigator={navigator} />
}

push方法，push(route: any)。Navigator使用這個方法跳轉到一個新的Scene。

API就瞭解這麼多，下面看一個簡單的例子。數據都是寫死的。

這個例子的主要功能就是從一個Scene（組件）HomeController，跳轉到另外的一個組件PetListController。就是從一組用戶裏點選一個之後顯示這個用戶擁有的寵物列表。

代碼裏的User數據以及用戶的Pets數據都是寫死的。如果要學習網絡請求方面的內容可以參考HomeController裏的fetchAction方法，以及填坑系列的前篇Http篇。

準備

HomeController，在這個組件裏顯示用戶列表。

import React, { Component } from 'react';
import {...略...} from 'react-native';

export default class HomeController extends Component {
    state: State;

    constructor(props) {
        super(props);

        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            message: '',
            dataSource: ds.cloneWithRows(['Micheal', 'Jack', 'Paul'])
        };
    }

// ...略...

    render() {
        return (
            <View style={{marginTop: 64}}>
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={this._renderRow.bind(this)}
                />
            </View>
        );
    }
};

文中儲備要代碼都已經略去。

你可以看到，數據源就是一個數組['Micheal', 'Jack', 'Paul']，裏面有三個人。數據最後顯示在ListView裏。

行渲染的時候，在行的裏面添加可以相應點擊的TouchableHighlight，在用戶點擊之後跳轉到PetListController中。

    _renderRow(data: string, sectionID: number, rowID: number, 
        highlightRow: (sectionID: number, rowID: number) => void) {
        return (
            <TouchableHighlight onPress={() => {
                    this._onPressRow(rowID);
                    highlightRow(sectionID, rowID);
                }}>
                <View style={styles.row}>
                    <Text style={styles.text}>{data}</Text>
                </View>
            </TouchableHighlight>
        );
    }

另外的一個PetListController裏只是顯示某個用戶的寵物列表。

export default class PetListController extends Component {
    state: State;

    constructor(props) {
        super(props);

        const ds = new ListView.DataSource({ rowHasChanged: (r1, r2) => r1 !== r2 });

        this.state = {
            dataSource: ds.cloneWithRows(['Dog 1', 'Dog 2', 'Dog 3'])
        };
    }

// ...略...

    render() {
        return (
            <View style={{ marginTop: 64 }}>
                <ListView
                    dataSource={this.state.dataSource}
                    renderRow={this._renderRow.bind(this)}
                    renderSeperator={this._renderSeparator.bind(this)}
                    />
            </View>
        );
    }
};

在這個組件裏顯示的就是寵物數據。展示方式也是用的ListView。

開始導航

在本例中，導航開始的地方不在某個具體的Controller裏（組件），而是在index.ios.js，android的在index.android.js裏。這麼做並不好，以後重構代碼的時候會提升到同一個文件中。

我們從Navigator繪製的地方開始導航的講解：

render() {
    return (
        <View style={styles.container}>
            <Navigator
                initialRoute={this.initialRoute}
                renderScene={this._renderScene}
                navigationBar={
                    <Navigator.NavigationBar
                        routeMapper={NavigationBarRouteMapper} />
                }
                />
        </View>
    );
}

回顧一下最開始的API，renderScene方法是用來繪製每一個Scene（場景）。Sene的實質就是一個個的組件，這個組件會佔滿一個屏幕。

組件的繪製需要有一些基本的信息，這個信息就是在initialRoute裏指定的。

    this.initialRoute = {
        title: 'Users',
        component: HomeController,
        index: 0,
        passProps: {
            // 在這裏傳遞其他的參數
        }
    }

這個initialScene是一個對象，內容有你自己定。

下面看看Scene的繪製方法renderScene：

_renderScene(route: Route, navigator: Navigator) {
    if (route.component) {
        return React.createElement(route.component
            , {...this.props, ...route.passProps, navigator, route});
    }
}

這個方法每次都會返回一個ReactElement實例，和JSX語法返回的是一樣的，雖然JSX看起來是這樣的<HomeController />。

這樣寫可能對於初學者來說有一點繞，那麼更加直觀一點的寫法是什麼樣呢？來看看：

_renderScene(route: Route, navigator: Navigator) {
    switch(route.index) {
        case 0: 
            return <HomeController />;
        case 1:
            return <PetListController />;
        default:
            return <HomeController />;
    }
}

這個寫法作用就是根據用戶當前要訪問的Route的index值來繪製相應的組件來作爲當前的Scene。

但是，如此寫法也略顯複雜。你在寫這個render方法的時候需要知道全部的導航路勁，即從一開始是哪個Scene，第二部導航到哪個Scene，第三部。。。以此類推。在Navigator路徑上有幾個Scene就需要寫幾個。所以使用第一種寫法，用createElement方法來，根據指定的組件實例來返回作爲Scene使用的組件。

NavigatorBar

上面的例子運行出來的時候有一個極大的問題，你不注意的話在PetListController沒法返回到HomeController。

界面上並沒有返回按鈕，但是RN居然把iOS的在最左側的手勢拖動返回上一級的功能實現了。這個功能在Android的實現上也有。總之隱藏不見的這個功能在用戶體驗上會有很大的問題。

所以必須用到Navigator的NavigationBar。

<Navigator
  renderScene={(route, navigator) =>
    // ...
  }
  navigationBar={
     <Navigator.NavigationBar
       routeMapper={{
         LeftButton: (route, navigator, index, navState) =>
          { return (<Text>Cancel</Text>); },
         RightButton: (route, navigator, index, navState) =>
           { return (<Text>Done</Text>); },
         Title: (route, navigator, index, navState) =>
           { return (<Text>Awesome Nav Bar</Text>); },
       }}
       style={{backgroundColor: 'gray'}}
     />
  }
/>

NavigatorBar裏設置了三個元素，左右兩個按鈕和中間的Title。上面代碼中的按鈕無法響應用戶的點擊操作。下面就看看如何添加這部分代碼：

LeftButton: (route, navigator, index, navState) =>
  {
    if (route.index === 0) {
      return null;
    } else {
      return (
        <TouchableHighlight onPress={() => navigator.pop()}>
          <Text>Back</Text>
        </TouchableHighlight>
      );
    }
  },

理論上如的部分就看到這裏。我們看看我們的代碼是怎麼添加的：

var NavigationBarRouteMapper = {
    LeftButton(route, navigator, index, navState) {
        if (index > 0) {
            return (
                <TouchableHighlight style={{ marginTop: 10 }} onPress={() => {
                    if (index > 0) {
                        navigator.pop();
                    }
                } }>
                    <Text>Back</Text>
                </TouchableHighlight>
            )
        } else {
            return null
        }
    },

    RightButton(route, navigator, index, navState) {
        return null;
    },

    Title(route, navigator, index, navState) {
        return (
            <TouchableOpacity style={{ flex: 1, justifyContent: 'center' }}>
                <Text style={{ color: 'white', margin: 10, fontSize: 16 }}>
                    Data Entry
        </Text>
            </TouchableOpacity>
        );
    }
};

在左側按鈕中，首先檢查當前Scene的index是多少。如果是大於0的就說明可以回退到上一級，否則不作處理。

另外，給Title也添加了響應點擊的代碼。但是隻是一個效果，沒有添加onPress事件的處理代碼。

push & pop

總結一下上面的內容。需要跳轉的HomeController和PetListController已經準備好了。導航用的Navigator也配置完成了，並且也包括NavigationBar。在繪製每一個Secne的時候，也給這些Scene傳入了props，裏面包含了Route對象和navigator對象。

有了上面的內容只是可以在運行起來的時候顯示第一個Scene：HomeController。於是，在HomeController的ListView裏的Row繪製的時候添加了TouchableHighLight並在相應事件裏調用了Navigator的push方法跳轉到下一個Scene。

    _onPressRow(rowID: number) {
        this.props.navigator.push({
            title: 'Pets',
            component: PetListController,
            passProps: {}
        });
    }

push方法裏傳入的對象就是Route類型（基本就是類型這個概念）。這個對象指明要跳轉的是哪個Scene，以及其他信息。

pop方法在上面的NavigationBar裏的左側按鈕已經講到。

最後

要完全的實現Navigation，需要用到Navigator和跳轉的Scene（組件）。而把他們串聯起來的是Route定義和作爲props傳入每個Scene的navigator對象。

代碼

代碼在這裏，可以同時支持Android和iOS。還沒有整理，不過對於這個簡單的例子來說正合適。

React Native填坑之旅--Navigation篇

Navigator基礎

準備

開始導航

NavigatorBar

push & pop

最後

代碼

使用neovim打造go ide(支持代碼跳轉, 代碼補全, 實時語法檢查)

挑戰程序設計競賽 2.3章習題 poj 3046 Ant Counting

Shell/Python中的用戶名獲取

玩轉React樣式

React與ES6（一）開篇介紹

React Native填坑之旅--LayoutAnimation篇

老樹新芽，在ES6下使用Express

React和ES6（二）ES6的類和ES7的property initializer

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結