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