实现React Navigation Tab组件时遇渲染警告，求解决方案

这个警告的核心原因是：你把tabBarIcon的渲染逻辑直接写在了screenOptions的回调函数内部，每次BottomTabScreen组件渲染时，这个回调都会生成一个全新的tabBarIcon函数/组件。React会把这个新函数识别成不同的组件类型，进而销毁旧的子树DOM节点和状态，重新创建新的，这不仅影响性能，还会触发警告。

解决步骤： #

把tabBarIcon的逻辑提取成独立的组件或函数，放在BottomTabScreen组件外部，这样它就不会在每次渲染时被重新创建。

修改后的代码示例： #

首先定义独立的图标组件：

// 把图标逻辑抽成外部组件，避免每次渲染重新创建
const TabBarIcon = ({ route, focused, size, color }) => {
  let iconName;
  if (route.name === 'Home') {
    iconName = focused ? 'home-sharp' : 'home-outline';
  } else if (route.name === 'Search') {
    iconName = focused ? 'search' : 'ios-search-outline';
  } else if (route.name === 'Activity') {
    iconName = focused ? 'ios-heart' : 'ios-heart-outline';
  } else if (route.name === 'Profile') {
    iconName = focused ? 'ios-person-circle' : 'ios-person-outline';
    size = focused ? size + 3 : size;
  }
  return <Ionic name={iconName} size={size} color={color} />;
};

const Tab = createBottomTabNavigator();
const BottomTabScreen = () => {
  return (
    <Tab.Navigator
      screenOptions={({ route }) => ({
        tabBarHideOnKeyboard: true,
        tabBarShowLabel: false,
        headerShown: false,
        tabBarStyle: {
          height: 70,
        },
        // 直接复用外部定义的TabBarIcon组件
        tabBarIcon: (props) => <TabBarIcon route={route} {...props} />
      })}>
      <Tab.Screen name="Home" component={Home} />
      <Tab.Screen name="Search" component={Search} />
      <Tab.Screen name="Activity" component={Activity} />
      <Tab.Screen name="Profile" component={Profile} />
    </Tab.Navigator>
  );
};

原理说明： #

React通过组件的引用（类型标识）来判断是否复用已有的DOM和状态。如果组件/函数每次渲染都是新的，React会判定这是不同的组件，强制卸载旧实例并挂载新实例，这就是警告出现的根本原因。将逻辑抽离到外部后，组件引用保持稳定，React就能正常复用已有节点和状态，消除警告同时提升性能。

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