zoukankan      html  css  js  c++  java
  • React Native 通过Navigator正反向传参和跳转思路

    场景:从A页面跳转到B页面,从A页面传参数到B页面再从B页面返回并回传参数。

    1.在入口文件定义Navigator:引入A页面,配置属性:默认首页(参数可自定义) initialRoute={{name:"a",component:A}};配置跳转的动画效果configureScene={(route)=>{return Navigator.SceneConfigs.VerticalDownSwipeJump}},这个route是跳转目标的路由对象即前面初始化路由的对象;导航路径,可为导航提供路由,renderScene{(route,navigator)=>{let tar = route.component; return <tar {...route.params} navigator={navigator}},这里的tar是路由的目标组件,"...route.params"即可把当前也页面的参数push到下个页面,navigator={navigator}即可把导航当作属性传过去下个页面。

    正向传参:

    2.在A页面引入B页面,构造属性id,等会传给B页面,在触发导航的组建里获取navigator传过来的属性: const {navigator}= this.props ; if (navigator) {navigator.push({id:123})};

    3.在B页面设置构造属性id,通过componentDidMount(){this.state({id:this.props.id})}获取到A页面传来的id

    反向传参:

    4.在A页面增加属性back,push给B页面时多加个方法供B回调,方法里getBack:function(gg){_this.setState({getBack:gg})};

    在B页面回调,在触发返回的方法里,if(this.porps.getBack){this.props.getBack(‘要回传的数据’)},然后通过navigator.pop,返回去

  • 相关阅读:
    Java io 理解
    Java应用的理解
    Flyweight 享元模式
    Bridge 桥梁模式
    Decrator 装饰模式
    [CF997C]Sky Full of Stars_二项式反演_等比数列_容斥原理
    [CF1010D]Mars Over_位运算性质
    [CF991D]Bishwock_状压dp
    [Agc030B]Tree Burning_贪心
    [Cometoj#4 E]公共子序列_贪心_树状数组_动态规划
  • 原文地址:https://www.cnblogs.com/myswift-lhq/p/5787766.html
Copyright © 2011-2022 走看看