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：下载网络字体点击右上角的红色“下载网络字体”按钮。您可以通过单击向下箭头来获取配置文件，但是您还需要.ttf文件。

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

第6步（iOS）：将.ttf添加到Xcode中的资源中在Xcode ios/yourprojectname.xcodeproj中打开项目。进入Xcode后，右键单击资源目录，选择“将文件添加到“ yourprojectname” ...”，然后选择自定义图标字体.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 Icon = createIconSetFromFontello(fontelloConfig, 'kelleyicons');
export default Icon;

步骤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，打开应用程序，然后将手指伸向零错误！

Answer 2

我们执行以下操作，以在React中显示.ttf和.svg图标

$True

或

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

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

对不起，我用错了双引号错误，因为我正在用手机接听电话

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

2 个答案:

为NativeBase反应本机自定义图标字体