React Native自定义带矢量图标Tab Bar 如何渲染配置的tabBarIcon

你只需要在自定义CustomTabBar的路由循环渲染逻辑中，直接调用配置的tabBarIcon方法，传入对应状态的color和size参数即可，具体修改如下：

步骤1 清理无用导入 #

首先移除CustomTabBar顶部无用的导入语句，避免不必要的编译警告：

// 删掉这行，该导入和当前组件逻辑无关
import { whileStatement } from '@babel/types';

步骤2 插入图标渲染逻辑 #

在TouchableOpacity内部你想要放置图标的位置（一般在文字上方），加入如下代码调用tabBarIcon：

{
  // 先判断当前路由是否配置了tabBarIcon，避免报错
  options.tabBarIcon && options.tabBarIcon({
    // 传入选中/未选中对应的颜色，可根据设计需求调整
    color: isFocused ? 'white' : '#CCCCCC',
    // 传入自定义的图标大小
    size: 24
  })
}

修改后的TouchableOpacity完整代码如下：

<TouchableOpacity
  accessibilityRole="button"
  accessibilityState={isFocused ? { selected: true } : {}}
  accessibilityLabel={options.tabBarAccessibilityLabel}
  testID={options.tabBarTestID}
  onPress={onPress}
  onLongPress={onLongPress}
  style={{
    minHeight: 50,
    backgroundColor: '#66000000',
    justifyContent: 'center',
    alignItems: 'center',
  }}>
  {/* 渲染配置的图标 */}
  {options.tabBarIcon && options.tabBarIcon({
    color: isFocused ? 'white' : '#CCCCCC',
    size: 24
  })}
  <Text style={{ color: isFocused ? 'white' : '#CCCCCC', marginTop: 4 }}>
    {label}
  </Text>
</TouchableOpacity>

你可以根据自己的设计要求调整size数值以及color的取值，完全适配你配置的任意矢量图标组件。

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