React Native 选项卡视图：如何防止所有选项卡在初始时加载

【问题标题】：React Native tab view: How to prevent all tabs loading at initial timeReact Native 选项卡视图：如何防止所有选项卡在初始时加载
【发布时间】：2021-05-14 14:00:17
【问题描述】：

我正在使用这个库 https://www.npmjs.com/package/react-native-tab-view 进行标签视图。我总共有 4 个选项卡，每个选项卡的内容都有 API 加载。当我用这个标签视图打开屏幕时。所有 4 个选项卡同时加载。每个选项卡的 API 都在调用并行。我希望首先只初始化一个选项卡，然后根据单击加载相应的选项卡。

【问题讨论】：

标签： react-native tabs

【解决方案1】：

Fixed it by following condition


    renderScene = ({ route }) => {
    if (route.key == 'scene0' && this.state.index == 0) {
      return <Scene0 />;
    }
    if (route.key == 'scene1' && this.state.index == 1) {
      return <Scene1 />;
    }
    if (route.key == 'scene2' && this.state.index == 2) {
      return <Scene2 />;
    }
    if (route.key == 'scene3' && this.state.index == 3) {
          return <Scene3 />;
        }

或者通过添加 lazy 标志，我们也可以达到同样的效果

<TabView
          navigationState={{index, routes}}
          renderScene={renderScene}
          onIndexChange={setIndex}
          initialLayout={{width: wp(100)}}
          renderTabBar={renderTabBar}
          tabBarPosition={'bottom'}
          lazy
        />

【讨论】：