React Native回退后如何刷新界面

逃离我推掉我的手 2022-02-02 07:36 668阅读 1赞

问题：当我们在当前界面更改数据后，点击方法：this.props.navigation.goBack()后退，如何让前一个或者前一个的前一个有关联的界面刷新数据，保持数据的实时同步显示？

  1. 注：
  2. 在这里我用的导航器为React Navigation，路由写法使其非常容易扩展导航逻辑，或是整合到redux中。
  3. 由于路由可以嵌套使用，因而开发者可以根据不同页面编写不同的导航逻辑，且彼此互不影响。
  4. React Navigation中的视图是原生组件，同时用到了运行在原生线程上的Animated动画库，性能表现十分流畅。
  5. 此外其动画形式和手势都非常便于定制。
  6. 推荐，文档地址：https://reactnavigation.org/docs/intro/
  7. 待我有时间写一篇关于这个组件的鸡脖，之后这句话就会消失。

![Image 1][]

Paste_Image.png

![Image 1][]

Paste_Image.png

![Image 1][]

Paste_Image.png

界面：界面A显示用户是否进行了通讯认证，界面B为通讯认证界面—是否已选择联系人，界面C为选择联系人界面。

逻辑：当A未进行通讯认证，点击未认证跳转到B界面，在B界面点击选择联系人跳转到C界面，在C界面通过点击选择联系人，并关闭界面C返回到界面B的同时，刷新界面B数据。如果再返回到界面A，同样刷新界面A数据。

代码：
界面A：

  1. import  {DeviceEventEmitter} from 'react-native';
  2. //...
  3. componentDidMount() {
  4.         this.subscription = DeviceEventEmitter.addListener('Key', this.refreshData)
  5.     };
  6.     refreshData(data) {
  7.         this.setState({
  8.             data: data,
  9.         });
  10.     };
  11.     componentWillUnmount() {
  12.         this.subscription.remove();
  13.     };
  14. 注：refreshData方法中的this可能找不到，需要从新设置一个_this来代替。

界面B（与A一样）：

  1. import  {DeviceEventEmitter} from 'react-native';
  2. //...
  3. componentDidMount() {
  4.         this.subscription = DeviceEventEmitter.addListener('Key', this.refreshData)
  5.     };
  6.     refreshData(data) {
  7.         this.setState({
  8.             data: data,
  9.         });
  10.     };
  11.     componentWillUnmount() {
  12.         this.subscription.remove();
  13.     };

界面C：

  1. import  {DeviceEventEmitter} from 'react-native';
  2. //...
  3. ()=>{
  4.      DeviceEventEmitter.emit('Key', '待传参数')
  5. }

到这里就结束了，是不是很简单，界面A和B设置了监听，当界面C发送事件并传值，界面A和B通过Key区分，是否取值并刷新当前界面，当然刷新通过改变state值来实现的，啦啦啦啦啦。。。

[Image 1]:

发表评论

表情：
评论列表 （有 0 条评论，668人围观）

还没有评论，来说两句吧...

相关阅读

    相关 react native

    React Native使你能够在Javascript和[React][]的基础上获得完全一致的开发体验，构建世界一流的原生APP。 React Native

    朱雀朱雀/ 0 赞/ 363 阅读