React Native - Как обновить FlatList при возврате на предыдущую страницу?

Question

React Native - Как обновить FlatList при возврате на предыдущую страницу?

1

Я попытаюсь объяснить свое дело:

У меня 2 страницы/экраны

SreenA.js:

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

ScreenB.js:

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

Чего я хочу достичь:

Когда я нажму кнопку "Назад" в экране "Б", мое приложение вернется к экрану "А". Когда я вернусь к 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});
  }

Crocodile 27 окт. 2018, в 19:02

Источник

0

Что вы используете для навигации?
Wainage 27 окт. 2018, в 16:09
0

Я использую StackNavigator
Crocodile 27 окт. 2018, в 16:09
0

Использовать onWillFocus навигации onWillFocus
Wainage 27 окт. 2018, в 16:11
0

Можете ли вы привести пример для моего случая? Я приму как правильный ответ, если это сработало.
Crocodile 27 окт. 2018, в 16:12

Показать ещё 2 комментария

Теги:

javascript

android

react-native

1 ответ

Ещё вопросы

Что вы используете для навигации?
Использовать onWillFocus навигации onWillFocus
Можете ли вы привести пример для моего случая? Я приму как правильный ответ, если это сработало.

Wainage · Answer 1 · 2018-10-27T14-07-00.000Z

Добавьте 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, но не при возобновлении приложения.

В этом примере вы можете расширить его для своих нужд.