欢迎访问 生活随笔!

生活随笔

当前位置: 首页 >

RN返回navigation方法

发布时间:2025/3/15 42 豆豆
生活随笔 收集整理的这篇文章主要介绍了 RN返回navigation方法 小编觉得挺不错的,现在分享给大家,帮大家做个参考.

RN官方指定的路由管理是navigation  通过打印我们可以得到navgation的相关属性

1:dispatch ,Redux的事件发起

2:goback()返回

3:navigate(routeName,{parmas:xxx}) 界面跳转并且添加参数(或者是回调函数)

4:state:这个对象里面有 当前的routename/key/和params参数

这里讨论的是A-B之间的数据交互

1:事件监听

事件监听类似于iOS原生的通知,一个发,一个收即可.

A界面收:

1 import { 2 DeviceEventEmitter 3 } from 'react-native'; 1 componentDidMount() {2 //收到监听3 this.listener = DeviceEventEmitter.addListener('通知名称',(e)=>{4 alert(e)5 });6 }7 componentWillUnmount(){8 // 移除监听 9 this.listener.remove(); 10 }

B界面在pop回A界面的时候发:

1 import { 2 DeviceEventEmitter 3 } from 'react-native'; 1 pop = ()=>{ 2 let value = '监听' //准备一个值 3 DeviceEventEmitter.emit('通知名称',value); //发监听 4 this.props.navigator.pop({ }) 5 }

2:事件回调 

A界面在push到B界面的时候定义个回调函数

1 push = () =>{ 2 this.props.navigator.push({ 3 component:DetailsView, 4 passProps:{ 5 callback:(msg)=>{ alert(msg) } 6 } 7 }) 8 }
//在navigation中:
this.props.navigation.navigate(routeName,{callback:(parmas)=>this.fun(params)})

 

B界面在pop回A界面的时候调用该回调函数

1 pop = () =>{ 2 3 this.props.navigator.pop({ 4 }) 5 6 if(this.props.callback){ 7 this.props.callback('回调')
    // this.props.navigation.state.params.callback("params") 8 } 9 }

转载于:https://www.cnblogs.com/allenxieyusheng/p/7717641.html

总结

以上是生活随笔为你收集整理的RN返回navigation方法的全部内容,希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错,欢迎将生活随笔推荐给好友。