React Native - 如何在返回上一頁時刷新FlatList？

Question

我會嘗試解釋我的情況：

我有2頁/屏幕

SreenA.js：

...
<FlatList>
</FlatList>
...

ScreenB.js：

...
<Button> This button for back to ScreenA </Button>
...

我想要實現的目標：

當我按下screenB中的后退按鈕時，我的應用程序將返回到screenA。 當我回到screenA時，我需要刷新FlatList。 （每次我回到screenA）。

我如何在Android Native中實現這種情況？

我添加此部分可幫助您更好地了解我面臨的挑戰。 在Android Native中，我將使用onResume刷新列表（每次調用屏幕/頁面時調用onResume）。

我已經嘗試但現在不適合我：

我已經嘗試了這個但是我得到它只是在應用程序在后台調用然后顯示在前台：

state = {
    appState: AppState.currentState
  }

  componentDidMount() {
    AppState.addEventListener('change', this._handleAppStateChange);
  }

  componentWillUnmount() {
    AppState.removeEventListener('change', this._handleAppStateChange);
  }

  _handleAppStateChange = (nextAppState) => {
    if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
      console.log('App has come to the foreground!')
      //i place the code here for refresh the flatList. But not work
    }
    this.setState({appState: nextAppState});
  }

Answer 1

添加navigation.addListener以在每次頁面接收導航焦點時觸發。

舉個例子：

class Page1 extends React.Component {
  constructor(props) {
    super(props);
    this.state = { ts: 0 }

    // this will fire every time Page 1 receives navigation focus
    this.props.navigation.addListener('willFocus', () => {
      this.setState({ ts: Date.now() })
    })
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          Page 1 [{this.state.ts}]
        </Text>
        <Button title="Page 2" onPress={() => this.props.navigation.navigate('Page2')}/>
      </View>
    );
  }
}

有關完整示例，請在手機上查看以下小吃 。 每次導航回第1頁時，時間戳都會更新，但不會在應用程序恢復時更新。

您應該可以從此示例中根據需要擴展它。