javascript - 如何在 React Navigation 中的每个选项卡更改上有条件地渲染组件？

Question

我有 React Native 和 React Navigation 的 BottomNavigator。当我更改选项卡时，我的组件不会卸载并仍在渲染。您能告诉我如何在每个选项卡更改上实现有条件渲染组件吗？

const AppStack = createBottomTabNavigator(
  {
    CHARTS: {
      screen: ChartsScreen,
      navigationOptions: () => ({
        tabBarIcon: ({ tintColor }) => (
          <Icon color={tintColor} style={{ top: HP('0.3%') }} name="chart-histogram" size={HP('4%')} />
        ),
        tabBarLabel: 'Charts'
      })
    },
    ABOUT: {
      screen: AboutScreen,
      navigationOptions: () => ({
        tabBarIcon: ({ tintColor }) => (
          <Icon color={tintColor} style={{ top: HP('0.3%') }} name="buddhism" size={HP('4%')} />
        ),
        tabBarLabel: 'About'
      })
    }
  },
  {
    tabBarOptions: {
      showIcon: true,
      lazy: true,
      activeTintColor: '#ffffff',
      inactiveTintColor: 'rgba(255, 255, 255, 0.7)',
      style: {
        backgroundColor: '#068485',
        ...ifIphoneX(
          {
            height: HP('7%')
          },
          {
            height: HP('8%')
          }
        )
      },
      labelStyle: {
        fontSize: HP('2%'),
        fontWeight: 'bold'
      }
    }
  }
)

Answer 1

根据文档，您可以使用这些监听器:

willFocus - the screen will focus

didFocus - the screen focused (if there was a transition, the transition completed)

willBlur - the screen will be unfocused

didBlur - the screen unfocused (if there was a transition, the transition completed)

了解更多 here .

<小时/>

此外，您还提到:

I have two tabs, in one of them i have setInterval for every 5 seconds render, when i change the tab, the render is still working on the previous tab.

我猜如果您设置重新渲染的时间间隔，就会出现问题，但无论如何，您可以清除 willBlur 中的时间间隔