react native 页面跳转传参

react native 组件之间传参包括父传子和子传父，但是也有页面跳转时需要传参，比如从A页面跳转到B页面，两者无甚关系，但是B页面需要A页面的关键字来对数据进行筛选，这个时候就需要通过页面跳转来传参。

react native 的页面跳转组件为 Navigator， 关于 Navigator 的相关资料：http://www.jianshu.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