React Native同屏对应多路由如何实现单次渲染避免重复渲染

React Navigation 的 BottomTabNavigator 会为每个注册的 Tab.Screen 维护独立的组件实例，即使传入的是同一个组件引用，只要路由name不同，就会生成两个互相独立的挂载节点。你给NewProduct配置了lazy:false，这个标签页会在Tab初始化时就直接挂载，和Home标签下的HomeScreen实例同时存在，自然会出现两次渲染。

方案1（推荐）：单路由+自定义Tab点击逻辑 #

不要为同组件注册两个Tab路由，只保留一个Home路由，通过自定义Tab按钮的点击事件，用路由参数/全局状态控制HomeScreen展示的内容，全程只维护一个组件实例，从根源上避免重复渲染。
示例配置：

<Tab.Navigator
  screenOptions={({ navigation }) => ({
    // 自定义Tab栏按钮点击逻辑
    tabBarButton: (props) => {
      if (props.accessibilityLabel === 'Home') {
        return (
          <TouchableOpacity 
            {...props} 
            onPress={() => navigation.navigate('Home', { tabType: 'default' })}
          />
        )
      }
      if (props.accessibilityLabel === 'Neues') {
        return (
          <TouchableOpacity 
            {...props} 
            onPress={() => navigation.navigate('Home', { tabType: 'newProduct' })}
          />
        )
      }
      return <TouchableOpacity {...props} />
    }
  })}
>
  {/* 只注册一个Home路由 */}
  <Tab.Screen 
    name="Home" 
    component={HomeScreen} 
    options={{ title: 'Home' }} 
  />
</Tab.Navigator>

在HomeScreen内部通过route.params?.tabType判断当前要展示的默认首页内容还是新品内容即可。

方案2：配置getId让两个路由共享实例 #

如果业务上必须保留Home和NewProduct两个路由名（比如需要兼容深层链接、其他页面的固定路由跳转逻辑），可以给两个Tab.Screen配置完全相同的getId返回值，告诉React Navigation这两个路由指向同一个组件实例，不需要重复创建。
示例配置：

<Tab.Screen 
  name="Home" 
  component={HomeScreen} 
  options={{ title: 'Home' }}
  getId={() => 'shared-home-instance'}
/>
<Tab.Screen 
  name="NewProduct" 
  component={HomeScreen} 
  options={{ title: 'Neues', lazy:false }}
  getId={() => 'shared-home-instance'}
/>

*注意：该方案下HomeScreen只会挂载一次，切换两个Tab时不会触发组件重挂载，不要在组件初始化阶段一次性读取路由参数/路由名，需要搭配useFocusEffect监听路由变化，同步更新页面内容。

不要尝试用React.memo包裹HomeScreen解决问题：React.memo只能拦截相同组件实例下props未变化的重渲染，两个独立挂载的组件实例属于完全不同的React节点，React.memo无法阻止初始阶段的重复挂载。

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