React Native：单击选项卡时重新渲染组件

Question

我正在使用React Navigation，并且当我单击选项卡时，我试图强制重新渲染组件（和getData()函数）。

我试图跟随this但没有运气。

路由器

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，则需要通过route params传递dispatch或绑定的action函数。