0

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

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

它显示问号而不是图标

在此处输入图像描述

我怎样才能解决这个问题？

4

4 回答 4

1

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

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

ios-home并且logo-settings不属于Ionicons这就是你得到的原因？象征。

于 2020-02-12T09:54:38.347 回答
1

导致此问题的原因是您的图标名称与库中的图标不匹配。尝试使用不同的图标类型和名称。对于您当前的代码 iconName='ios-home' ，用 iconName='home' 和 iconName='logo-settings' 替换 iconName='settings' 可能会起作用。

您也可以尝试使用不同的图标库

import icon from fontAwesome5

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

您可以在此处找到 fontAwesome的图标列表。

于 2020-02-12T07:50:24.763 回答
0

我遇到了同样的问题，但是使用 react-native-navigation，我的导航栏中出现了带有问号的正方形。它只影响了 Android，而且似乎只影响了我尝试使用 getImageSource() 加载的图标。

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

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

于 2020-08-23T18:08:04.587 回答
0

图标实际上是字体，用图片代替字符。您得到这些符号是因为浏览器无法识别字体，并且没有任何可打印的字符与之搭配。

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

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

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

于 2020-02-12T14:16:17.593 回答