React Native回退后如何刷新界面

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

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

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

![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：

import  {DeviceEventEmitter} from 'react-native';
    //...
    componentDidMount() {
            this.subscription = DeviceEventEmitter.addListener('Key', this.refreshData)
        };
        refreshData(data) {
            this.setState({
                data: data,
            });
        };
        componentWillUnmount() {
            this.subscription.remove();
        };
    注：refreshData方法中的this可能找不到，需要从新设置一个_this来代替。

界面B（与A一样）：

**界面C：**

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

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

[Image 1]: