React Native: повторная визуализация компонента при нажатии вкладки

Question

Я использую React Navigation и пытаюсь повторно выполнить рендеринг компонента (и функции getData()), когда нажимаю на вкладку.

Я пытался следовать этому , но безуспешно.

Маршрутизатор

export const Tabs = TabNavigator(
  {
  Progress: {
    screen: ProgressStack,
    navigationOptions: ({ navigation }) => ({
      tabBarLabel: 'Progress',
      tabBarIcon: ({ tintColor }) =>
      <Icon name="trending-up" size={25} color={tintColor} />
    }),
  },
export const ProgressStack = StackNavigator({
  Progress: {
    screen: ProgressScreen,
    navigationOptions: ({ navigation }) => ({
      title: 'Progress',
    }),
  },
});

Компонент прогресса

componentWillReceiveProps() {
  console.log('rerender!');
  this.getData();
}

Answer 1

Не то, что я пробовал, но я думаю, что это может быть правильным подходом: https://reactnavigation.org/docs/with-navigation-focus.html

Используйте этот компонент высокого порядка для передачи isFocusedProp, затем используйте componentDidUpdate для вызова getData

componentDidUpdate (previousProps) {
  if (!previousProps.isFocused && this.props.isFocused) {
    this.getData()
  }
}

Существует также событие кнопки onPress, которое вы можете использовать: https://reactnavigation.org/docs/tab-navigator.html#tabbaronpress,, но для этого потребуется способ инициировать вызов данных, который вы делаете.Если вы используете redux, вам нужно будет передать функцию отправки или связанного действия через параметры маршрута.