反应导航v5中的问号而不是图标

Question

我通过以下命令安装了矢量图标：

npm install --save react-native-vector-icons

然后通过这种方法导入图标：（我没有使用expo）

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

这是主要代码：

const MainTab=()=>{

  const Tab = createBottomTabNavigator();

  return(

<Tab.Navigator

screenOptions={({route})=>({
 tabBarIcon:({color, size})=>{
  let iconName;

  if (route.name=='Home') {

    iconName='ios-home'

  }else if(route.name=='Settings'){

  iconName='logo-settings'
 }

 return <Ionicons name={iconName} size={size} color={color} />
 }
})

>


<Tab.Screen name="Home" component={Home} />
<Tab.Screen name="Settings" component={SecondPage} />


</Tab.Navigator>
  )}

它显示问号而不是图标

我该如何解决？

Answer 1

此问题是由于您的图标名称未与库中的图标匹配而引起的。尝试使用不同的图标类型和名称。 对于您当前的代码替换 iconName='ios-home' 与 iconName='home' 和 iconName='logo-settings' 与 iconName='settings' 可能有用。

您也可以使用其他图标库尝试

import icon from fontAwesome5

<Icon name='home'/>和<Icon name='cog'/>

您可以找到fontAwesome here的图标列表。

Answer 2

点击下面的链接，这将为您提供从中获取图标的网站。

https://github.com/oblador/react-native-vector-icons#bundled-icon-sets

ios-home和logo-settings不是Ionicons的一部分，这就是为什么您得到了？符号。

Answer 3

图标实际上是字体，用图片替换字符。之所以会得到这些符号，是因为浏览器无法识别该字体，并且没有任何可打印的字符。

您需要将字体拖到项目的公用文件夹中，以便浏览器可以从服务器下载字体。该文档解释了如何在这里：

https://github.com/oblador/react-native-vector-icons/blob/master/README.md#bundled-icon-sets

这将允许您使用最初选择的图标名称，例如“ ios-something”。

Answer 4

我遇到了同样的问题，但是使用react-native-navigation，我在导航栏中得到带有问号的方块。它只影响了Android，而且似乎只影响了我尝试使用getImageSource（）加载的图标。

解决我问题的方法是卸载apk并再次添加它（显然是由于字体缓存，如此处的评论：https://github.com/oblador/react-native-vector-icons/issues/1117所示）

其他人指出，简单的问号是由提供不正确的图标名称引起的。