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
