1. 程式人生 > >React Native回退後重新整理介面

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');