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

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>
  )
}

没有出现错误消息，但是和“主页”不会显示，仅在 expo 视图中显示为图像“?” 我错过了什么吗？请帮忙

Answer 1

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

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

根据其文档：

This library is a compatibility layer around @oblador/react-native-vector-icons to work with the Expo asset system.

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

替换：

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

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

react-native-vector-icons/Feather Icon always "?"

reactjs

react-native

react-native-android

expo