如何在react原生应用中添加@expo/vector-icons？

Question

我使用的是@expo/vector-icons这里是我的package.json文件

 "dependencies": {
     "@expo/vector-icons": "^4.1.1",
     "color": "^1.0.3",
     "expo": "^30.0.1",
     "moment": "^2.22.2",
     "react": "16.3.1",
     "react-native": "https://github.com/expo/react-native/archive/sdk- 
      30.0.0.tar.gz",
    "react-native-extended-stylesheet": "^0.4.0"  },

当我在我的组件中导入@expo/vector-icon库时

import { Ionicons } from '@expo/vector-icons';

它会给出错误

​

Answer 1

在你的依赖项(package.json)中删除@expo/向量图标。它们包含在expo包中，不同版本的expo和expo/vector-图标可能会导致像这样的错误。

从official docs

这个库默认安装在通过expo init的模板项目上--它是expo包的一部分。它包括流行的图标集，您可以使用@expo/vector-icons目录浏览所有图标。

更新2021:官方文档略有改变，而不是在以下位置搜索图标：

@expo/vector-icons目录

现在，您可以使用以下命令进行搜索：

icons.expo.fyi

这使得它比以前容易得多。

Answer 2

这个库是默认的，所以你不需要安装@expo/vector-icons。

例如，您可以这样做：

import { Ionicons } from '@expo/vector-icons';

然后你可以像这样使用它：

<Ionicons name="ios-pizza" color="red" size={200} />

仅供参考，此目录有助于查找不同的图标https://expo.github.io/vector-icons/

Answer 3

去'https://icons.expo.fyi/‘选择你想要的任何东西，然后通过复制导入，然后使用它。

    import React from 'react'
    import { Entypo } from '@expo/vector-icons';
    import { View } from 'react-native';

    export const Example = () => {
      return(
        <View>
          <Entypo name="plus" size={24} color="black" />
        </View>
      )
    }