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

Question

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

Answer 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
        />

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

React Native tab view: How to prevent all tabs loading at initial time

tabs

react-native