详解react native页面间传递数据的几种方式
1.利用react-native事件DeviceEventEmitter监听广播
应用场景：
-表单提交页面，A页面跳转到B页面选人，然后返回A页面，需要将B页面选择的数据传回A页面。
-多个多媒体来回切换播放，暂停后二次继续播放等问题。
代码如下：
A页面
componentDidMount(){
//利用DeviceEventEmitter监听concactAdd事件
this.subscription=DeviceEventEmitter.addListener('concactAdd',(dic)=>{//dic为触发事件回传回来的数据
//接收到update页发送的通知，后进行的操作内容
if(dic.approver_list){
this.setState((preState:Object)=>{
this.updateInputValue(preState.approver_list.concat(dic.approver_list),'approver_list');
return{approver_list:preState.approver_list.concat(dic.approver_list)};
});
}
if(dic.observer_list){
this.setState((preState:Object)=>{
this.updateInputValue(preState.observer_list.concat(dic.observer_list),'observer_list');
return{observer_list:preState.observer_list.concat(dic.observer_list)};
});
}
});
...
componentWillUnmount(){
this.subscription.remove();
}
B页面
//触发concactAdd事件广播
handleOk=(names:[])=>{
const{field}=this.props;
DeviceEventEmitter.emit('concactAdd',{[field]:names});
}
2.用react-navigation提供的路由之间
A页面
//定义路由跳转函数cb表示需要传递的回调函数
exportconstnavigateToLinkman=(cb:Function,type?:string,mul?:boolean):NavigateAction=>
NavigationActions.navigate({routeName:'Linkman',params:{cb,type,mul}});
//跳转选择人员页面
handleSelectUser=()=>{
Keyboard.dismiss();
this.props.actions.navigateToLinkman(this.selectedUser,'',true);
...
//选择人员后的回调函数
selectedUser=(selectUser:string[])=>{
this.setState((preState)=>{
constnewEmails=preState.emails.concat(selectUser);
constemails=[...newSet(newEmails)];
return{
emails,
};
});
}
B页面
handleToUser=()=>{
...
navigation.state.params.cb(user.email,group);
...
}
3.利用react-navigation提供的路由事件监听触发事件
在A页面路由失去焦点的时候触发该事件
componentDidMount(){
this.props.navigation.addListener('didBlur',(payload)=>{
if(this.modalView)this.modalView.close();
});
}
那么问题来了，为何不在页面卸载（componentWillunmount）的时候触发该事件?
如果不了解react-native和react-navigation，会很困惑，A页面卸载了，为什么还能接收到来自B页面的数据或者事件，原因是：react-navigation中，A页面跳转到B页面，A页面没有卸载，只是在它提供的路由栈中堆积，例如A跳转到B中，A页面不执行componentWillunmount,当每一个路由pop掉的时候才会执行componentWillunmount,卸载掉当前页面。
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。
声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。