如何在本机应用程序中添加@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/vector-icons。它们包含在 expo 包中，不同版本的 expo 和 expo/vector-icons 可能会导致这样的错误。

来自official docs：

This library is installed by default on the template project that get through expo init -- it is part of the expo package. It includes popular icon sets and you can browse all of the icons using the @expo/vector-icons directory.

2021 年更新：官方文档稍作改动，不再在以下位置搜索图标：

@expo/vector-icons directory

您现在可以使用以下方式进行搜索：

icons.expo.fyi

这比以前容易多了。

Answer 2

删除您的节点模块文件夹和运行 expo init。和运行项目

Answer 3

库默认自带，不需要安装@expo/vector-icons.

你可以这样做，例如：

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

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

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

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

Answer 4

转到'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>
      )
    }

如何在本机应用程序中添加@expo/vector-icons？

how to add @expo/vector-icons in react native app?

react-native

expo