RN笔记-逆向传值

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逆向传值的逻辑，灵活运用即可。