react native 組件之間傳參包括父傳子和子傳父，但是也有頁面跳轉時需要傳參，比如從A頁面跳轉到B頁面，兩者無甚關系，但是B頁面需要A頁面的關鍵字來對數據進行篩選，這個時候就需要通過頁面跳轉來傳參。

react native 的頁面跳轉組件為 Navigator， 關于 Navigator 的相關資料：http://www.lxweimin.com/p/91fa0f34895e

Navigator 跳轉時就可以進行傳參：

A頁面跳轉時傳參：

圖片.png

B頁面接收參數直接用 props 就可以了：

圖片.png

但是到這還沒完，我之前看到的教程都只講到這，簡直是坑爹。

我們的頁面都是用 Navigator 來控制的，而我把 Navigator 放在了 Routers.android.js 中，當程序進入 index.android.js 中時，讓其進入到 Routers.android.js 中。

index.android.js：

圖片.png

而我的 Routers.android.js 就相當于 react 中的路由管理部分，所有的頁面都需要在這里注冊：

'use strict';  // Strict mode 錯誤處理
import React, { Component } from 'react';
import {
    View,
    Text,
    Navigator,
    BackAndroid,
    Image,
} from 'react-native';
import styles from './styles'
import { TabBar } from './js/components';
import { Login,Mine,PersonalDetails,MapView } from './js/container';

export default class Router extends Component {

    constructor(props) {
        super(props);
        this._renderPage = this._renderPage.bind(this);
    }

    _renderPage(route, nav) {

        switch (route.id){
            case 'home' :
                return (
                    <View style={ styles.container }>
                        <TabBar nav={nav} />
                    </View>
                );
                break;
            case 'login' :
                return (
                    <Login nav={nav} />
                );
                break;
            case 'mine' :
                return (
                    <Mine nav={nav} />
                );
                break;
            case 'personalDetails' :
                return (
                    <PersonalDetails nav={nav} {...route.params} />
                );
                break;
            case 'mapView' :
                return (
                    <MapView nav={nav} />
                );
                break;
        }

    }

    render() {
        return (
            <Navigator
                initialRoute = {{name:'Home', index:0, id:'home'}}
                configureScene={() => Navigator.SceneConfigs.FadeAndroid}
                renderScene={this._renderPage}
            />
        );
    }
}

我們在這里細節的講一些該部分：

圖片.png

圖片.png

上面已經提到了，傳參重要的一步，就是用 route 將參數展開傳遞過去，這樣在 B 頁面才能用 props 拿到。

成功傳參截圖：

圖片.png