tabBar 上不显示图标

Posted 2023-02-21

【中文标题】tabBar 上不显示图标

【英文标题】：icon does not show up on tabBar

【发布时间】：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

【参考方案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" />
          ),