React Native回退后刷新界面

1、如果是使用goback返回刷新,也就是返回上一级页面后刷新页面,这时可以使用回调方法。

例如:从A跳到B再回到A,

A页面定义回调方法,

this.props.navigation.navigate("B", {
    id: this.state.id,
    refresh: function () {
        this.init();
    }
});
B页面返回时调用,

<TouchableOpacity  onPress={() => {
    this.props.navigation.state.params.refresh();
    this.props.navigation.goBack();
}}>
    <Text>返回</Text>
</TouchableOpacity>
2,从多个页面返回刷新

import {DeviceEventEmitter} from 'react-native';

//...

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来代替。
or 

//组件加载
componentDidMount() {
    this.subscription = DeviceEventEmitter.addListener('Key', data =>{
        if (data){
            this.queryData(true);
            //佣金信息查询
            this.props._queryUserReward();
        }
    });
   
}
//组件卸载
componentWillUnmount() {
    this.subscription.remove();
}

在需要发送的界面:

DeviceEventEmitter.emit('KeyBack', 'true');

猜你喜欢

转载自blog.csdn.net/kdsde/article/details/83276487
今日推荐