Question

我正在使用React Native的Navigator。无论如何都要刷新组件，所以当我回到它时，它将进行一个新的API调用并获取更新的数据以显示在组件中。我发现了一些类似的问题，但没有好的答案......

Answer 1

使用订阅在回叫中添加Api呼叫。解决问题

  componentDidMount() {
     this.props.fetchData();        
     this.willFocusSubscription = this.props.navigation.addListener(
      'willFocus',
      () => {
        this.props.fetchData();
      }
    );
  }

  componentWillUnmount() {
    this.willFocusSubscription.remove();
  }

Answer 2

当pop（）在页面不是一个好主意之前刷新

您可以尝试DeviceEventEmitter对象

DeviceEventEmitter.addListener('xxx', callback)

componentDidMount

DeviceEventEmitter.emit('xxx', anythingInCallback...)

pop()

ps：DeviceEventEmitter.removeAllListeners('xxx')

中的上一页componentWillUnmount

Answer 3

您应该保存页面的state并在componentDidMount中发出操作，因为在安装组件后立即调用它。

参考文献：

https://facebook.github.io/react/docs/react-component.html
https://github.com/ReactTraining/react-router

<强> ADDED

由于您的组件已经安装，因此您应该倾听ComonentWillReceiveProps。

Answer 4

你可以将一个回调函数发送到nextscene作为道具的前一个。

this.props.navigator.push({
          name: *nextscene*,
          passProps: {
            text: response,
            callBack: this.callback
        });

async callback(){
   await ....//make new api request grab the udpated data
}

然后在你的nextscene中你调用callback方法然后弹出。您也可以发送参数

 this.props.callBack()
 this.props.navigator.pop()

Answer 5

简单的方法是使用react native resetTo函数。它将替换顶部项目并弹出它。

如果我们这样做，componentWillReceiveProps会致电。因此，我们可以在该函数中提供API调用并使其变得简单。

了解更多详情https://facebook.github.io/react-native/docs/navigatorios.html#resetto

在navigator.pop（）上刷新组件

5 个答案: