React-native 矢量图标显示为问号答案

【问题标题】：React-native vector icons shown as question markReact-native 矢量图标显示为问号
【发布时间】：2021-02-05 04:11:11
【问题描述】：

我已经安装了 react-native v0.46 并安装了 NativeBase，但是在组件中使用标签后，没有显示图标而是显示问号（Android 并且未在 iOS 中测试）。

为了解决这个问题，我做了很多修改，如下所示：

rnpm link
react-native link react-native-vector-icons
NativeBase 安装指南：https://nativebase.io/docs/v0.3.0/getting-started
https://github.com/oblador/react-native-vector-icons
我的json包文件：{ "name": "Magazine", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest" }, "dependencies": { "native-base": "^2.3.1", "react": "16.0.0-alpha.12", "react-native": "0.46.4", "react-native-image-slider": "^1.1.5" }, "devDependencies": { "babel-jest": "20.0.3", "babel-preset-react-native": "2.1.0", "jest": "20.0.4", "react-test-renderer": "16.0.0-alpha.12" }, "jest": { "preset": "react-native" } }
以及我使用这些图标的组件：ios-arrow-left & navicon

我使用的是 Windows 10、Node v8.1.4、React-native-CLI v2.0.1

代码：

import React, { Component } from 'react';
import {
  AppRegistry,
} from 'react-native';
import {Container, Header, Title, Button, Icon} from 'native-base';

export default class CityMagazine extends Component {
  render() {
    return (
        <Container>
          <Header>
            <Button transparent>
              <Icon name="ios-arrow-left" />
            </Button>

            <Title>Header</Title>

            <Button transparent>
              <Icon name="navicon"/>
            </Button>
          </Header>
        </Container>
    );
  }
}

AppRegistry.registerComponent('CityMagazine', () => CityMagazine);

【问题讨论】：

你能用图标标签更新帖子吗？
我确实更新了。检查一下

标签： android react-native

【解决方案1】：

矢量图标由许多已知的库组成，因此您可能需要通过设置 Icon 的 type 属性来指定您使用的库，如下所示：

<Icon type="EvilIcons" name="navicon"/>

【讨论】：

【解决方案2】：

首先检查矢量图标包是否链接使用

react-native link react-native-vector-icons

如果已链接，则运行命令：

react-native run-android

此命令将在您的项目中完全安装矢量图标包。

更新：问题是ios-arrow-left不在矢量图标目录中，它的名字现在是ios-arrow-back。

【讨论】：

我完成了所有这些步骤。我认为 ios-arrow-left 和 navicon 在矢量图标包中不可用。
@EsmatullahArifi 这里是目录：oblador.github.io/react-native-vector-icons你可以在这里查看
谢谢。 ios-arrow-left 现在是 ios-arrow-back。明白了。
@EsmatullahArifi 我已经更新了答案以使其可以接受。
如果链接这些，我的 apk 大小会增加。它实际上是什么意思“react-native link react-native-vector-icons”

【解决方案3】：

我也遇到了同样的问题，但是按照这些步骤操作救了我。

注意：在项目根目录中键入所有命令。

1- 输入命令：npm install --save react-native-vector-icons 安装包

2-输入命令：react-native link

3- 停止打包服务器并再次运行它：npm start

4- 通过命令重建android版本：npm run android

最后一步将尝试下载 react-native-vector-icons 所需的一些依赖项，一切顺利！

【讨论】：

【解决方案4】：

确保您使用的是正确的图标名称。您可以查看 .json 文件进行确认，例如 MaterialIcons：

https://github.com/oblador/react-native-vector-icons/blob/4b9123212517d4e11b5cec89a81794854f7f326b/glyphmaps/MaterialIcons.json#L54-L56

【讨论】：

【解决方案5】：

我遇到了类似的问题，并按照上述步骤操作。使它对我有用的是使用终端窗口重建 pod。在 MacOS 中，我打开一个终端窗口并运行以下命令：

cd ios (一旦你进入你的项目目录) 吊舱安装

我刷新了 XCode 模拟器，瞧！

【讨论】：