如何向 NativeBase 添加自定义图标

Question

我有我设计的自定义图标的 .ttf 和 .svg 文件。但我想将它们导入到我的 NativeBase 项目中，使它们可用于 NB 的 <Icon /> 组件。我怎样才能做到这一点？

Answer 1

我们做类似下面的事情来在 React 中显示 .ttf 和 .svg 图标

  import ttfFile from “./fonts/fileName.ttf”;
  import svgFile from “./svg/fileName.svg”

  <img src={ttfFile} />
  <img src={svgFile} />

或

 <img src={require(“./fonts/fileName.ttf”)}/>
  <img src={require(“./svg/fileName.svg”)} />

对不起，双引号打错了，因为我是用手机接听的

Answer 2

NativeBase 的 React Native 自定义图标字体

采用自： https://medium.com/@kelleyannerose/react-native-custom-icon-font-with-no-sad-red-screen-72b8d09a0e7b

这对我有用:)

第 0 步： React Native 矢量图标安装和 link 确保你已经安装了 react-native-vector-icons 并且 linked。如果您还没有安装它，请按照他们文档中的安装说明进行操作。通常这两个命令应该为你做。

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

第 1 步： 在 Fontello 中添加图标首先，你必须把你的图标变成一种字体。转到 fontello.com，正如他们的 UI 如此准确地建议的那样，“将自定义 SVG 图标或 SVG 字体拖到此处”。

第 2 步： Select 图标这可能不那么明显，但在您上传图标后，您必须 select 要包含的图标（一个接一个）。这很好，因为您可以根据需要从其他库中选择图标，它们都将成为您的单一图标字体的一部分。您会清楚地看到带有红色圆圈的 select 离子。

第 3 步/重要提示： 命名您的字体我建议在 Fontello 中红色大按钮旁边的小框中命名您的字体。这样就不会有任何问题你的字体名称是什么。而且文件名会和字体名匹配，所以你可以在iOS和Android中使用相同的名字，减少出错的空间 — phew.

第 4 步： 下载 webfont 单击右上角的红色“下载网络字体”按钮。您可以通过单击向下箭头单独获取配置文件，但您还需要 .ttf 文件。

第 5 步：将 .ttf 文件添加到项目从下载的字体目录中找到 .ttf 文件，并将其添加到 src 文件中有意义的位置。我通常有一个 src/assets/fonts 目录供我使用。为了我自己的理智，我喜欢在共享文件中的某个地方访问这个文件。

步骤 6 (iOS): 将 .ttf 添加到 Xcode 中的资源在 Xcode ios/yourprojectname.xcodeproj 中打开项目。进入 Xcode 后，右键单击资源目录，select“将文件添加到“yourprojectname”...”和 select 自定义图标字体 .ttf 文件（我在那个 src/assets/fonts我在步骤5中提到的目录）。

步骤 7 (iOS): 添加字体以复制捆绑资源仍在 Xcode 中时，转到顶部栏中的“构建阶段”，打开“复制捆绑资源”，您将看到来自 react-native-vector-icons 的图标字体列表。检查该列表中的图标字体名称，如果不存在，请单击“+”和 select 您的 .ttf 文件。

步骤 8 (iOS)：添加到 INFO.PLIST 打开您的 info.plist 文件（最好在添加任何其他目标之前，因为这是将被复制的 info.plist）并打开“应用程序提供的字体”。单击带圆圈的小“+”。它会在顶部添加一行供您输入字体文件名。

步骤 9 (Android): 添加 .ttf 到 Android 将 .ttf 文件添加到 android/app/src/main/assets/fonts 目录。这应该已经存在，因为您已经安装了 react-native-vector-icons 和运行 react-native link，它们将 Android.

的所有图标字体文件放在这里

第 10 步：将配置和图标组件添加到您的项目回到共享src目录！在您的共享 src 目录中的某处添加两个文件，名为 icon-font.js 和 icon-font.json 或任何您想给它们起的名字。我喜欢有一个 src/config 目录用于（你猜对了）配置内容。

返回您从 Fontello 下载的文件，获取 config.json 内容并将其粘贴到您的 icon-font.json 文件中。

打开您的 icon-font.js 文件并粘贴以下内容（当然，将 kelleyicons 替换为您命名的自定义图标字体）。

import { createIconSetFromFontello } from 'react-native-vector-icons';
import fontelloConfig from './icon-font.json';
const MyIcon = createIconSetFromFontello(fontelloConfig, 'kelleyicons');
export default MyIcon;

步骤 11: 添加实例在运行安装该应用程序之前，继续在某处添加图标字体的实例，以便您可以立即仔细检查它是否正常工作。在任何组件或屏幕文件中，从 icon-font.js 文件导入图标。

import MyIcon from './../config/icon-font.js';

在您的视图中，像这样使用它（因为我使用的是 NativeBase，所以我将自定义图标包装在 NativeBase 的 Icon 组件中）。您可以在 icon-font.json 文件中找到要使用的个人名称。

<Icon><MyIcon
  name={'chrome'}
  size={20}
  color={'#333333'} /></Icon>

第 12 步：保存，运行并（希望）庆祝！确保所有内容都已保存，转到您的终端，run npm start，打开您的应用程序，祈祷零错误！

额外提示！

从 React Native 0.60 开始，资源会自动 linked。这意味着，如果您运行 pod install（您最终会这样做），您可能会看到一条错误消息 'Multiple commands produce' error when building with new Xcode build system'。如果您正在运行宁 New Build System (File > Workplace Settings > Build System)。这个错误是因为 React Native 试图 link 相同的资源两次。如果您遇到这种情况，只需返回步骤 7 (iOS)：添加字体以复制捆绑资源 select 所有 .ttf 文件并按 - 按钮删除。然后再次构建:)

如何向 NativeBase 添加自定义图标

How to add custom Icons to NativeBase

javascript

reactjs

react-native

native-base

NativeBase 的 React Native 自定义图标字体