React-Native:新手理解Navigator

這是一個簡單的例子，用Navigator來跳轉頁面，頁面之間傳遞參數 (代碼是ES6語法寫的):

export default class SampleComponent extends React.Component {
    render() {
        let defaultName = 'FirstPageComponent';
        let defaultComponent = FirstPageComponent;
        return (
        <Navigator
          initialRoute={{ name: defaultName, component: defaultComponent }}
          configureScene={(route) => {
            return Navigator.SceneConfigs.VerticalDownSwipeJump;
          }}
          renderScene={(route, navigator) => {
            let Component = route.component;
            return <Component {...route.params} navigator={navigator} />
          }} />
        );
    }
}

這裏來解釋一下代碼:

第三行: 一個初始首頁的component名字，好比我寫了一個component叫HomeComponent，那麼這個name就是這個組件的名字【HomeComponent】了。

第四行: 這個組件的Class，用來一下子實例化成 <Component />標籤

第七行: initialRoute={{ name: defaultName, component: defaultComponent }} 這個指定了默認的頁面，也就是啓動app以後會看到界面的第一屏。 須要填寫兩個參數: name 跟 component。

第八，九，十行:

configureScene={() => {
return Navigator.SceneConfigs.VerticalDownSwipeJump;
}}

這個是頁面之間跳轉時候的動畫，具體有哪些？能夠看這個目錄下，有源代碼的: node_modules/react-native/Libraries/CustomComponents/Navigator/NavigatorSceneConfigs.js

最後的幾行:

renderScene={(route, navigator) => {
let Component = route.component;
return <Component {...route.params} navigator={navigator} />
}} />
);

這裏是每一個人最疑惑的，咱們先看到回調裏的兩個參數:route, navigator。經過打印咱們發現route裏其實就是咱們傳遞的name,component這兩個貨，navigator是一個Navigator的對象，爲何呢，由於它有push pop jump...等方法，這是咱們等下用來跳轉頁面用的那個navigator對象。

return <Component {...route.params} navigator={navigator} />

這裏有一個判斷，也就是若是傳遞進來的component存在，那咱們就是返回一個這個component，結合前面 initialRoute 的參數，咱們就是知道，這是一個會被render出來給用戶看到的component，而後navigator做爲props傳遞給了這個component。

因此下一步，在這個FirstPageComponent裏面，咱們能夠直接拿到這個 props.navigator:

export default class FirstPageComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }
    _pressButton() {
        const { navigator } = this.props;
        //爲何這裏能夠取得 props.navigator?請看上文:
        //<Component {...route.params} navigator={navigator} />
        //這裏傳遞了navigator做爲props
        if(navigator) {
            navigator.push({
                name: 'SecondPageComponent',
                component: SecondPageComponent,
            })
        }
    }
    render() {
        return (
            <View>
                <TouchableOpacity onPress={this._pressButton.bind(this)}>
                    <Text>點我跳轉</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

這個裏面建立了一個能夠點擊的區域，讓咱們點擊能夠跳到SecondPageComponent這個頁面，實現頁面的跳轉。 如今來建立SecondPageComponent，而且讓它能夠再跳回FirstPageComponent:

import React, {
    View,
    Text,
    TouchableOpacity,
} from 'react-native';

import FirstPageComponent from './FirstPageComponent';

export default class SecondPageComponent extends React.Component {

    constructor(props) {
        super(props);
        this.state = {};
    }

    _pressButton() {
        const { navigator } = this.props;
        if(navigator) {
            //很熟悉吧，入棧出棧~ 把當前的頁面pop掉，這裏就返回到了上一個頁面:FirstPageComponent了
            navigator.pop();
        }
    }

    render() {
    return (
            <View>
                <TouchableOpacity onPress={this._pressButton.bind(this)}>
                    <Text>點我跳回去</Text>
                </TouchableOpacity>
            </View>
    );
    }
}

大功告成，能進能出了。