React Native自定义TabBar中渲染函数式tabBarIcon的方法

你遇到的问题核心是：tabBarIcon是一个返回React组件的函数，直接在JSX中引用函数本身只会输出函数代码，必须调用这个函数才能得到要渲染的图标组件。另外，React Navigation的tabBarIcon函数默认会接收focused、color、size三个参数，用来根据Tab的激活状态调整图标样式，建议你利用这些参数优化交互体验。

步骤1：修正Screen的tabBarIcon定义 #

先把Screen的tabBarIcon改成接收参数的函数（即使暂时不用，也保持规范）：

<Tab.Screen 
  name="Home" 
  component={HomeScreen}
  options={{
    tabBarLabel: '',
    // 接收focused、color、size参数，可根据状态调整图标样式
    tabBarIcon: ({ focused, color, size }) => <LogoutIcon size={size} color={focused ? '#fff' : '#ccc'} />
  }}
/>

步骤2：在自定义MyTabBar中调用tabBarIcon函数并渲染 #

在你的MyTabBar组件里，找到渲染图标的位置，替换原来的<Text>{tabBarIcon}</Text>，改为调用函数并渲染返回的组件：

// 替换原来的Text部分
<View className='w-full items-center justify-center mb-2'>
  {/* 判断tabBarIcon是否存在，避免未设置的Screen报错 */}
  {tabBarIcon ? tabBarIcon({ 
    focused: isFocused, 
    color: isFocused ? '#fff' : '#ccc', // 根据激活状态设置颜色
    size: 20 
  }) : null}
</View>

完整修改后的MyTabBar关键部分 #

function MyTabBar({ state, descriptors, navigation }) {
  return (
    <View style={{ flexDirection: 'row', position: 'absolute', bottom: 30, right: 20, left: 20, backgroundColor: '#550080', borderRadius: 200, borderWidth: 2, borderColor: '#3c005a', padding: 0 }}>
      {state.routes.map((route, index) => {
        const { options } = descriptors[route.key];
        const label =
          options.tabBarLabel !== undefined
            ? options.tabBarLabel
            : options.title !== undefined
              ? options.title
              : route.name;

        const isFocused = state.index === index;

        // 保留原有onPress、onLongPress逻辑
        const onPress = () => {
          const event = navigation.emit({
            type: 'tabPress',
            target: route.key,
            canPreventDefault: true,
          });

          if (!isFocused && !event.defaultPrevented) {
            navigation.navigate({ name: route.name, merge: true });
          }
        };

        const onLongPress = () => {
          navigation.emit({
            type: 'tabLongPress',
            target: route.key,
          });
        };

        const tabBarIcon = options.tabBarIcon;

        return (
          <View className='flex-1 p-5 flex-row w-full text-center  items-center justify-center border-r border-[#3c005a]' key={label}>
            <TouchableOpacity
              accessibilityRole="button"
              accessibilityState={isFocused ? { selected: true } : {}}
              accessibilityLabel={options.tabBarAccessibilityLabel}
              onPress={onPress}
              style={{ flex: 1, alignSelf: 'center', alignContent: 'center', justifyContent: 'center' }}
            >
              <View className='w-full items-center justify-center mb-2'>
                {/* 修改后的图标渲染逻辑 */}
                {tabBarIcon ? tabBarIcon({ 
                  focused: isFocused, 
                  color: isFocused ? '#fff' : '#ccc',
                  size: 20 
                }) : null}
              </View>
            </TouchableOpacity>
          </View>
        );
      })}
    </View>
  );
}

核心原理说明 #

• tabBarIcon是函数，只有调用它才会返回<LogoutIcon />这类React元素，JSX才能正确渲染组件
• 传入isFocused参数可以让图标根据Tab的激活状态动态变化（比如颜色），提升用户体验
• 增加tabBarIcon存在性判断，避免没有设置图标的Screen出现函数调用报错

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