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,返回去

 

转载于:https://www.cnblogs.com/myswift-lhq/p/5787766.html