react-native中逆向传值的问题一般比较绕，这里用最简单的例子做分析：两层组件嵌套，实现点击最内层组件Push跳转次级级页面，并将url参数传递到次级页面。
场景构造与分析
Home首页中的ShopCenter组件，嵌套ShopCenterItem组件。
点击ShopCenterItem组件时要实现push次级页面，对于做过iOS开发的人都知道，不能直接在组件元素中执行push操作，可以通过代理方法、Block等监控到触发跳转的操作，并在Home首页执行push跳转。
同样的，在RN也需要通过函数回调的方式，先退回至Home首页，在Home页面中执行this.props.navigator.push。而url参数应该自下而上传递给Home。
ShopCenter组件
var ShopCenter = React.createClass({
getDefaultProps(){
//回调函数
return{
popToHomeView:null
}
}
<ShopCenterItem
shopImage={data.img}
shopSale={data.showtext.text}
shopName={data.name}
key={i}
detailurl={data.detailurl}
popToShopCenter={(url)=>this.popToHome(url)} // 参数往上传，用来接收
/>
//参数继续往上传
popToHome(url){
//判断 参数为空则return
if(this.props.popToHomeView == null) return;
//执行回调函数
this.props.popToHomeView(url);
}
});
ShopCenterItem组件
// 每一个商场
var ShopCenterItem = React.createClass({
getDefaultProps(){
return{
shopImage:'',
shopSale:'',
shopName:'',
detailurl:'',
popToShopCenter:null
}
}
<TouchableOpacity onPress={()=>{this.clickItem(this.props.detailurl)}}>
</TouchableOpacity>
// 参数往上传
clickItem(url){
//判断 参数为空则return
if(this.props.detailurl == null) return;
//执行回调函数
this.props.popToShopCenter(url);
}
});
Home页执行push跳转
{ /*购物中心*/ }
<ShopCenter
popToHomeView={(url)=>this.pushToShopCenterDetail(url)} //最终在这里拿到传递上来的参数
/>
//跳转到购物中心的详情页
pushToShopCenterDetail(url){
//测试一下传递上来的参数有没有获取到
alert(url);
this.props.navigator.push(
{
component:ShopCenterDetailView,//要跳转的版块
passProps:{'url':url}
}
);
},
文章中截取的是代码片段，理清RN逆向传值的逻辑，灵活运用即可。
