如何在react-native material-top-tabs-navigator中避免组件重复渲染

• 方案1：关闭页面切走自动卸载配置
  在Tab.Navigator的screenOptions中添加unmountOnBlur: false，保证不活跃的tab页面不会在切换时被卸载，保留原有渲染状态，避免每次切回重新渲染：

  <Tab.Navigator 
      screenOptions={{
          tabBarScrollEnabled: false,
          tabBarStyle: { backgroundColor: '#FFFFFF' },
          tabBarPressOpacity: true,
          unmountOnBlur: false // 新增配置项
      }}
      style={styles.tabBar}
  >
  

  如果你只需要针对个别页面保留状态，也可以把该配置单独添加到对应Tab.Screen的options中。

• 方案2：用React.memo包裹页面组件
  对没有可变依赖props的页面组件，用React.memo包裹，会对组件props做浅比较，只有props发生变化时才会触发重渲染：

  const Menu = React.memo(() => {
     return (...)
  })
  
  const Info = React.memo(() => {
     return (...)
  })
  
  const Review = React.memo(() => {
     return (...)
  })
  

• 方案3：优化tabBarIcon定义
  你当前代码中tabBarIcon为内联箭头函数，每次父组件渲染都会生成新的函数实例，可能触发tabBar额外重渲染，建议将渲染逻辑提取到组件外部，或用useCallback包裹；另外注意参数名拼写错误，forcused应为focused，否则无法拿到正确的聚焦状态：

  // 用useCallback包裹，保证函数引用稳定
  const renderMenuIcon = useCallback(({ focused, color }) => {
    return <Text style={styles.tabBarText}>메뉴</Text>;
  }, [])
  
  // Tab.Screen中引用
  <Tab.Screen
     name="Menu"
     component={Menu}
     options={{
         tabBarShowLabel: false,
         tabBarIcon: renderMenuIcon,
     }}
  />
  

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