javascript - react native : Re-Render Component When Tab is Click

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，则需要通过路由参数传递 dispatch 或绑定(bind)的操作函数。