Question

我安装了这个库：

npm install react-native-vector-icons

并链接

react native link

然后将其导入到我的项目中

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

然后我将其用于渲染部分组件，如下所示：

<Icon name={'ios-person-outline'} />

但是当我运行android应用程序时没有错误，但是该图标是一个问题图标 body身体有主意吗？

Answer 1

可能有两件事，要么您可能没有写正确的图标名称，要么是未通过库找到特定的图标。这是图书馆的一个非常普遍的问题。尝试使用其他一些更常用的图标更改图标名称，它将起作用。它实际上不是问题。请检查是否有帮助。谢谢。

此外，您还应该将Ionicons的import语句更改为.container。我不确定/Ionicons的工作情况如何，但希望我的解决方案有帮助。

刚刚尝试使用\，并且按预期的那样它不起作用，但是ios-person-outline起作用了。对于库来说，这是一个非常常见的问题，它不遵循大纲和其他类型的图标，当尝试使用实体图标或其他类型的图标时，它也会在材质图标上发生。

Answer 2

react-native-vector-icons 有很多图标的“类型”，您可以在此处查看它们：https://oblador.github.io/react-native-vector-icons/

您应该在导入时或在代码中使用图标时指定图标的类型。例如：

import SimpleIcon from 'react-native-vector-icons/SimpleLineIcons';

上面的代码将仅导入SimpleLineIcons，然后您可以像这样使用它们：

<SimpleIcon name="user" color="rgba(110, 120, 170, 1)" size={25} />

或者，您可以像这样导入它们：

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

然后，像这样使用它（指定类型）：

<Icon
  name='check'
  color='rgba(0, 0, 0, 0.38)'
  size={25}
  type="entypo"
/>

Answer 3

在我开始使用react-native-vector-icons之前，我曾经遇到过类似的问题，直到我了解了不同类型的组件。

type="AntDesign"

type="Entypo"

type="FontAwesome"

type="FontAwesome5"

type="FontAwesome5Brands"

type="Foundation"

type="Ionicons"

type="MaterialCommunityIcons"

type="MaterialIcons"

type="SimpleLineIcons"

type="Octicons"

等...

可以在“ https://oblador.github.io/react-native-vector-icons/”上的“ MaterialIcons”下找到图标名称“ person-outline”，我们可以这样做；

<Icon name='person-outline' type="MaterialIcons" />

希望这种解释有所帮助。

注意：请确保您采取了以下初始步骤；

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

AND

react-native link react-native-vector-icons

Answer 4

除了@Kivul的答案。每当您想使用react-native-vector-icons时。无需在组件上指定类型，只需导入名称所属的图标的类型并使用它即可。下面是一个示例：

import { 
   Ionicons, 
   Entypo, 
   MaterialCommunityIcons, 
   FontAwesome 
} from '@expo/vector-icons/';

然后在您的render方法中，返回任何组件，并传入图标的名称。

pick the name from https://oblador.github.io/react-native-vector-icons/

<FontAwesome 
  name={'money'} 
 ... 
 />

与其他名称相同，找到名称，然后找到其所属的组件，将其导入并添加名称。

我希望这会有所帮助吗？

Answer 5

步骤1：安装react-native-element：

npm install react-native-elements --save

步骤2：安装react-native-vector-icons从npm安装

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

链接

react-native link react-native-vector-icons

第1步：之后，您可以在页面上使用它，方法是

import { Icon } from 'react-native-elements';

第2步：

<Icon name="md-beer" type="ionicon" color="#887700" />

Answer 6

尝试将下一行添加到/app/build.gradle

apply from: "../../node_modules/react-native-vector-icons/fonts.gradle"

React native中的“ react-native-vector-icons”问题

6 个答案: