如何在不使用 Xcode 的 React Native 中添加自定义字体？答案

【问题标题】：How do I add custom font in React Native not using Xcode?如何在不使用 Xcode 的 React Native 中添加自定义字体？
【发布时间】：2016-07-25 09:28:39
【问题描述】：

有没有办法在 Atom 编辑器的 React Native 中添加自定义字体而不使用 Xcode？

【问题讨论】：

标签： javascript ios react-native react-jsx

【解决方案1】：

通过命令行使用rnpm 有一种更简单的方法。它将字体添加到 android 和 ios。将要添加的字体放在项目目录中的合适位置。在您的 package.json 中添加以下内容：

... "rnpm": { "assets": ["path/to/your/font/directory"] }, ... 然后从命令行执行：rnpm link

您现在可以愉快地在您的应用中使用您的字体了。

注意：您必须安装 rnpm 才能工作。就做npm install -g rnpm

这是文档：https://github.com/rnpm/rnpm#advanced-usage

【讨论】：

我做了这个方法，还是得到Unrecognized Font
您使用的是哪种字体？你在fontFamily: 'my_font" 中给出的字体名称是什么？ @Paul'Whippet'McGuane
fontFamily: 'Quicksand-Bold'
@Paul'Whippet'McGuane 您可以使用下面的 carlos-quiroga 答案检查字体名称是否正确

【解决方案2】：

不用编辑package.json的方式是：

在您的项目中安装 react-native-vector-icons (npm install --save react-native-vector-icons)。
将字体移至node_modules/react-native-vector-icons/Fonts。
运行react-native link。
运行react-native run-ios

问题是字体名称与文件名不同。显示已安装字体的所有名称的方法是修改AppDelegate.m并放入循环：

   for (NSString *familyName in [UIFont familyNames]) {
        for (NSString *fontName in [UIFont fontNamesForFamilyName:familyName]) {
            NSLog(@"%@", fontName);
        }
    }

图标字体的名称是相同的。

【讨论】：

这是不正确的。您应该在下面查看我的答案。
你不需要安装 react-native-vector-icons 只是为了使用 rnpm 添加字体。

【解决方案3】：

iOS 无法添加自定义字体。
您正在使用 Xcode，然后在本机应用程序中添加字体

将字体文件复制到资源中
在 Info.plist 文件中添加一个名为 UIAppFonts 的键。 ("应用程序提供的字体)将此键设为数组
对于您拥有的每种字体，将字体文件的全名（包括扩展名）作为项目输入到 UIAppFonts 数组中

【讨论】：

可以使用 rnpm 添加。