javascript - 如何将自定义图标添加到NativeBase

Question

我有用于设计的自定义图标的.ttf和.svg文件。但是我想将它们导入到我的NativeBase项目中，以使它们可用于NB的<Icon />组件。我该如何实现？

Answer 1

对NativeBase的本机自定义图标字体进行反应

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

这对我有用：)



步骤0：
React Native Vector Icons安装并链接
确保已安装并链接了react-native-vector-icons。如果尚未安装，请按照其文档中的安装说明进行操作。通常，这两个命令应该为您完成。

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

步骤1：在Fontello中添加图标
首先，您必须将图标转换成字体。转到fontello.com，并根据其用户界面的准确提示，“在此处拖动自定义SVG图标或SVG字体”。





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





第3步/大提示：命名您的字体
我建议在Fontello中红色大按钮旁边的小框中命名您的字体。这样，您的字体名称是什么就不会有任何疑问。而且文件名将与字体名称匹配，因此您可以在iOS和Android中使用相同的名称，从而减少出错的可能性。





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





步骤5：将.ttf文件添加到项目
从下载的字体目录中找到.ttf文件，然后将其添加到src文件中有意义的位置。我通常有一个使用的src/assets/fonts目录。我出于自己的理智，喜欢在共享文件中的某个位置访问此文件。



步骤6（iOS）：将.ttf添加到Xcode中的资源
在Xcode ios/yourprojectname.xcodeproj中打开项目。进入Xcode后，右键单击资源目录，选择“将文件添加到“您的项目名称”…”，然后选择自定义图标字体.ttf文件（我在第5步中提到的src/assets/fonts目录中可以找到我的文件）。



步骤7（iOS）：添加字体以复制捆绑资源
仍然使用Xcode时，转到顶部栏中的“构建阶段”，打开“复制捆绑资源”，然后您会看到react-native-vector-icons中的图标字体列表。检查该列表中的图标字体名称，如果不存在，请单击“ +”并选择您的.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，打开您的应用程序，并确保零错误！