React Native中如何实现点击Tab标签时才渲染对应Screen组件？

这个需求可以实现，你遇到的所有标签页组件同时初始化的问题，是因为@react-navigation/material-top-tabs默认会预渲染当前激活标签的相邻页面，只需调整Tab导航器的配置即可实现按需渲染。

具体修改方式 #

在你的Tab.Navigator上新增两个配置属性：

• 新增lazy={true}：开启懒加载机制，未激活的标签页不会提前初始化
• 新增lazyPreloadDistance={0}：禁用相邻页面预渲染逻辑，不会提前加载任何未激活的页面

修改后的MyTabs组件代码如下：

function MyTabs() {
  return (
    <Tab.Navigator
      initialRouteName="Feed"
      lazy={true}
      lazyPreloadDistance={0}
      screenOptions={{
        tabBarActiveTintColor: '#e91e63',
        tabBarLabelStyle: {fontSize: 12},
        tabBarStyle: {backgroundColor: 'powderblue'},
      }}>
      {/* 原有Tab.Screen配置不变 */}
      <Tab.Screen
        name="Feed"
        component={FeedScreen}
        options={{tabBarLabel: 'Home'}}
      />
      <Tab.Screen
        name="Notifications"
        component={NotificationsScreen}
        options={{tabBarLabel: 'Updates'}}
      />
      <Tab.Screen
        name="Hey"
        component={Hey}
        options={{tabBarLabel: 'Hey'}}
      />
    </Tab.Navigator>
  );
}

修改完成后，初始加载只会执行Feed组件的初始化逻辑打印对应日志，只有点击对应标签切换时，才会初始化对应标签的组件并打印日志。

额外补充说明 #

• 上述配置仅会在标签页首次被激活时执行一次初始化逻辑，已经渲染过的标签页切换时不会重新初始化、不会重复打印日志。如果你需要每次切换到对应标签都执行指定逻辑，可以使用useFocusEffect钩子：

import { useFocusEffect } from '@react-navigation/native';

function FeedScreen() {
  // 每次进入Feed标签都会执行该回调
  useFocusEffect(() => {
    console.log('Feed标签被激活');
    // 你要每次执行的逻辑写在这里
  });

  return (
    <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
      <Text>Feed!</Text>
    </View>
  );
}

• 如果你需要标签页切走后自动卸载，下次进入时重新走完整初始化流程，可以在Tab.Navigator上新增detachInactiveScreens={true}配置（该属性默认已开启，如无特殊需求无需额外设置）。

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