react-native-vector-icons/Feather Icon 总是“？”

Question

早上好，我正在尝试使用库https://github.com/oblador/react-native-vector-icons#installation

import Icon from 'react-native-vector-icons/Feather';

在我安装它并遵循安装的每一步之后

我尝试使用以下代码通过 expo 运行它：

function BottomTabNavigator1() {
  return (
    <Tabs.Navigator
        tabBarOptions={
            {
            activeTintColor: "#2F7C6E",
            inactiveTintColor: "#222222"
            }
        }
        apperance={
            {
                whenInactiveShow : "both"
            }
        }
    >

    <Tabs.Screen name="HomeScreen" component={HomeScreen}
    options={
        {
            tabBarIcon: ({ focused, color, size }) => (
                <Icon
                    name="Home"
                    size={size ? size : 12}
                    color={focused ? color : "#222222"}
                    focused={focused}
                    color={color}
                />
            )
        }
    }
    />
    <Tabs.Screen name="DefaultScreen" component={DefaultScreen}
    options={
        {
            tabBarIcon: ({ focused, color, size }) => (
                <Icon
                    name="Rocket"
                    size={size ? size : 12}
                    color={focused ? color : "#222222"}
                    focused={focused}
                    color={color}
                />
            )
        }
    }
    />
  </Tabs.Navigator>
  )
}

没有出现错误消息，但“主页”不会炫耀，只会在博览会视图中显示为图像“？” 我错过了什么吗？请帮忙

Answer 1

我认为react-native-vector-icons不支持 Expo，因为该包需要链接本机模块，除非您弹出，否则 Expo 项目不支持该模块。

您可以使用@expo/vector-icons作为替代方案。

根据其文档：

这个库是围绕@oblador/react-native-vector-icons 的兼容层，用于与 Expo 资产系统一起工作。

在您的情况下，您可以执行以下操作：

代替：

import Icon from 'react-native-vector-icons/Feather';

<Icon
  name="Home"
  size={size ? size : 12}
  color={focused ? color : "#222222"}
  focused={focused}
  color={color}
/>

和：

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

<Feather
  name="home"
  size={size ? size : 12}
  color={focused ? color : "#222222"}
  focused={focused}
  color={color}
/>

您可能需要运行：

npm i @expo/vector-icons

下面是小吃看看结果：https : //snack.expo.io/@dcangulo/2e6e4e