我有.ttf and .svg我设计的自定义图标的文件。但我想将它们导入到我的 NativeBase 项目中，使它们可以在 NB 中使用<Icon />成分。我怎样才能实现这个目标？
采纳自：https://medium.com/@kelleyannerose/react-native-custom-icon-font-with-no-sad-red-screen-72b8d09a0e7b
这对我有用:)
Step 0:React Native 矢量图标安装和链接 确保您已安装并链接了react-native-vector-icons。如果您尚未安装它，请按照其文档中的安装说明进行操作。通常这两个命令应该可以为您完成。
npm install react-native-vector-icons --save
react-native link
Step 1:在 Fontello 中添加图标 首先，您必须将图标转换为字体。去fontello.com，正如他们的 UI 如此准确地建议的那样，“将自定义 SVG 图标或 SVG 字体拖动到此处”。
Step 2:选择图标 这可能不是那么明显，但是上传图标后，您必须选择要包含的图标（一一）。这很好，因为如果您愿意，您可以从其他库中选择图标，并且它们都将成为您的一种图标字体的一部分。您将通过红色圆圈清楚地看到您的选择。
第 3 步/重要提示：为您的字体命名 我建议在 Fontello 红色大按钮旁边的小框中命名您的字体。这样就不会对您的字体名称有任何疑问。而且文件名将与字体名称相匹配，因此您可以在 iOS 和 Android 中使用相同的名称，从而减少出错的空间 — 唷。
Step 4:下载网络字体 单击右上角的红色“下载网络字体”按钮。您可以通过单击向下箭头来单独获取配置文件，但您还需要 .ttf 文件。
Step 5:将 .ttf 文件添加到项目中
找出.ttf从您下载的字体目录中创建文件并将其添加到您的src有意义的文件。我通常有一个src/assets/fonts我使用的目录。为了我自己的理智，我喜欢在共享文件中的某个位置访问此文件。
第 6 步（iOS）：将 .ttf 添加到 Xcode 中的资源
在 Xcode 中打开项目ios/yourprojectname.xcodeproj。进入 Xcode 后，右键单击资源目录，选择“将文件添加到“yourprojectname”...”，然后选择自定义图标字体 .ttf 文件（我的可用文件在该文件中）src/assets/fonts我在步骤 5) 中提到的目录。
第 7 步（iOS）：添加字体以复制捆绑资源 仍在 Xcode 中，转到顶部栏中的“构建阶段”，打开“复制捆绑资源”，您将看到来自react-native-vector-icons的图标字体列表。检查该列表中是否有您的图标字体名称，如果不存在，请单击“+”并选择您的 .ttf 文件。
步骤 8（iOS）: 添加到 INFO.PLIST 打开您的 info.plist 文件（最好在添加任何其他目标之前，因为这是将被复制的 info.plist）并打开“应用程序提供的字体”。单击带圆圈的小“+”。它会在顶部添加一行，供您输入字体文件名。
第 9 步（安卓）： Add .ttf至安卓
添加.ttf文件到android/app/src/main/assets/fonts目录。这应该已经存在，因为你已经安装了react-native-vector-icons并运行react-native link它把所有 Android 图标字体文件放在这里。
Step 10:将配置和图标组件添加到您的项目中
返回共享src目录！在共享中的某个位置添加两个文件src名为的目录icon-font.js and icon-font.json或者你想怎么称呼他们就怎么称呼他们。我喜欢有一个src/config（你猜对了）配置内容的目录。
返回到您从 Fontello 下载的文件，获取config.json内容并将它们粘贴到您的icon-font.json file.
打开你的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;
Step 11:添加实例
在运行应用程序之前，请继续在某处添加图标字体的实例，以便您可以立即仔细检查它是否正常工作。在任何组件或屏幕文件中，从icon-font.js file.
import MyIcon from './../config/icon-font.js';
在你看来，像这样使用它（因为我使用的是 NativeBase，我将自定义图标包装在 Native Base 中Icon成分）。您可以在以下位置找到要使用的个人名称icon-font.json file.
<Icon><MyIcon
name={'chrome'}
size={20}
color={'#333333'} /></Icon>
Step 12:保存、奔跑并（希望）庆祝！
确保所有内容都已保存，转到您的终端，run npm start，打开您的应用程序，祈祷零错误！
额外提示！
从 React Native 0.60 开始，资源会自动链接。这意味着如果你运行pod install（你最终会的）你may看到一个错误说'Multiple commands produce' error when building with new Xcode build system'。如果您正在运行New Build System (File > Workplace Settings > Build System)。此错误是因为 React Native 尝试链接相同的资源两次。如果您遇到这种情况，只需返回步骤 7 (iOS)：添加字体以复制捆绑资源选择所有 .ttf 文件并按-按钮进行删除。然后再次构建:)