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

Posted 2021-03-26

我安装这个库：

npm install react-native-vector-icons

并链接它

react native link

然后我将它导入我的项目

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

然后我在组件的渲染部分中使用它，如下所示：

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

但是，当我运行android应用程序没有错误但图标是一个qustion图标eny身体有想法？

答案

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

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

刚刚尝试使用ios-person-outline，并且正如预期的那样它不起作用，但ios-person做到了。它是图书馆的一个非常普遍的问题，它不承认大纲和其他类型的图标，在尝试使用实体或其他类型的图标时，也会出现材质图标。

另一答案

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"
/>

另一答案

当我开始使用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”下找到，所以我们可以这样做;

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

希望这个解释有所帮助

注意：确保您采取类似的初始步骤;

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

和

react-native link react-native-vector-icons