React Native Tab View：如何卸载非当前场景组件避免预加载

问题场景 #

已为TabView添加lazy属性，但切换到FirstScene时，SecondComponent仍会被渲染并执行数据请求，需要实现仅激活当前场景的组件才渲染并执行逻辑。

用户当前代码 #

renderScene 代码

const renderScene = ({ route }) => {
  switch (route.key) {
    case FirstScene:
      return <FirstComponent />;
    case SecondScene:
      return <SecondComponent />;
    default:
      return null;
  }
};

TabView 组件代码

<TabView
          lazy
          navigationState={{ index, routes }}
          renderScene={renderScene}
          initialLayout={{ width: Dimensions.get('window').width }}
          onIndexChange={setIndex}
          renderTabBar={(props) => (
            <TabBar
              {...props}
              style={{
                backgroundColor: '#f2f2f2',
                height: 32,
                borderBottomWidth: 0,
                shadowOffset: { height: 0, width: 0 },
                shadowOpacity: 0,
                shadowRadius: 0,
                marginBottom: 12,
              }}
              indicatorStyle={{ height: 0 }}
              activeColor="textlight.accent"
              inactiveColor="textlight.secondary"
              renderIndicator={(props: TabBarIndicatorProps<ITabProps>) => (
                <TabBarIndicator
                  {...props}
                  style={{
                    height: 32,
                    backgroundColor: 'white',
                    borderRadius: 10,
                    alignItems: 'center',
                  }}
                />
              )}
              renderTabBarItem={(props: TabBarItemProps<ITabProps>) => (
                <TabBarItem
                  {...props}
                  activeColor="primary.600"
                  style={{ justifyContent: 'flex-start', marginTop: -2 }}
                  renderLabel={({ route, color }) => (
                    <Text color={color} size="sm" fontWeight={600} marginBottom={30}>
                      {route.title}
                    </Text>
                  )}
                />
              )}
            />
          )}
        />

解决方案 #

1. 禁用预渲染相邻Tab #

lazy属性默认会预渲染当前Tab相邻的一个路由（即index±1的Tab），要彻底只渲染当前激活的Tab，需添加lazyPreloadDistance={0}属性：

<TabView
          lazy
          lazyPreloadDistance={0} // 新增此属性，禁止预渲染任何非当前Tab
          navigationState={{ index, routes }}
          renderScene={renderScene}
          initialLayout={{ width: Dimensions.get('window').width }}
          onIndexChange={setIndex}
          // 其余TabBar渲染代码保持不变
          renderTabBar={(props) => (
            // ... 原有TabBar代码
          )}
        />

2. 组件内根据聚焦状态控制逻辑 #

即使禁用预渲染，也可以在组件内部通过聚焦状态精准控制数据请求等逻辑，确保仅激活时执行：

第一步：在renderScene中传递聚焦状态

const renderScene = ({ route, focused }) => { // 接收focused参数
  switch (route.key) {
    case FirstScene:
      return <FirstComponent isFocused={focused} />; // 传递聚焦状态
    case SecondScene:
      return <SecondComponent isFocused={focused} />;
    default:
      return null;
  }
};

第二步：组件内部使用聚焦状态

以FirstComponent为例：

const FirstComponent = ({ isFocused }) => {
  useEffect(() => {
    // 仅当组件聚焦时执行数据请求
    if (isFocused) {
      fetchData(); // 你的数据请求函数
    }
  }, [isFocused]);

  return (
    // 组件渲染内容
  );
};

3. 可选：完全不渲染非激活组件 #

如果需要彻底不渲染非激活Tab的组件，可以在renderScene中做条件判断：

const renderScene = ({ route, focused }) => {
  switch (route.key) {
    case FirstScene:
      return focused ? <FirstComponent /> : null;
    case SecondScene:
      return focused ? <SecondComponent /> : null;
    default:
      return null;
  }
};

注意：这种方式会导致切换Tab时组件完全重新挂载，适合需要彻底重置组件状态的场景。

内容的提问来源于stack exchange，提问作者Andon Mitev