tabBar 上不显示图标答案

【问题标题】：icon does not show up on tabBartabBar 上不显示图标
【发布时间】：2021-07-28 23:34:42
【问题描述】：

我使用 fontawesome 将图标添加到选项卡按钮，但显示唯一的标签，而不是图标：

<Tab.Screen
        name="Home"
        component={Home}
        options={{
          tabBarLabel: "Home",
          tabBarAccessibilityLabel: "Home",
          tabBarTestID: "tabbar-Home",
          tabBarIcon: () => (
            <FontAwesomeIcon icon={faInfoCircle} color={'white'} size={30} />
          ),
        }}

我使用 ReactNative，而不是 expo！

【问题讨论】：

你在用Expo吗？
React Native，而不是 Expo

标签： reactjs react-native font-awesome mobile-development

【解决方案1】：

如果你使用Expo那么，你可以这样做

import { FontAwesome5 } from '@expo/vector-icons';
import { FontAwesome } from '@expo/vector-icons';

在选项卡选项中这样写

<Tab.Screen
        name="Home"
        component={Home}
        options={{
          tabBarLabel: "Home",
          tabBarAccessibilityLabel: "Home",
          tabBarTestID: "tabbar-Home",
          tabBarIcon: () => (
            <FontAwesome name="info-circle" size={24} color="black" />
          ),
        }}

或者

<Tab.Screen
        name="Home"
        component={Home}
        options={{
          tabBarLabel: "Home",
          tabBarAccessibilityLabel: "Home",
          tabBarTestID: "tabbar-Home",
          tabBarIcon: () => (
            <FontAwesome5 name="info-circle" size={24} color="black" />
          ),
        }}

现在如果你使用React Native CLI

然后先安装React Native Vector Icons

那就这样写

import FontAwesome5 from 'react-native-vector-icons/FontAwesome5';

在选项卡选项中这样写

<Tab.Screen
        name="Home"
        component={Home}
        options={{
          tabBarLabel: "Home",
          tabBarAccessibilityLabel: "Home",
          tabBarTestID: "tabbar-Home",
          tabBarIcon: () => (
            <FontAwesome5 name="info-circle" size={24} color="black" />
          ),
        }}

【讨论】：