在反应本机ios应用程序中无法识别fontFamily答案

【问题标题】：fontFamily unrecognized in react native ios app在反应本机ios应用程序中无法识别fontFamily
【发布时间】：2020-03-16 12:44:56
【问题描述】：

我正在努力加载我的字体，PressStart2P。它是来自谷歌字体的字体。 . .已多次执行以下步骤，以确保我没有马虎。根据所有迹象，该字体应该在 react native 应用程序中可用。

在我的项目目录的根目录下创建了 assets 文件夹
在 assets 文件夹中创建字体文件夹并将字体文件放置在其中...与 PostScript 名称所指示的完全一样，并且使用了 .otf 和 .ttf 版本的字体。
在 package.json 中，指定自定义字体所在的位置：

 "rnpm": {
   "assets": [
  "./assets/fonts/"
   ]
 },

在我的终端中，输入 npx react-native 链接
在 App.js 中添加了我的字体

作为参考，这里是整个 App.js 文件：

import React, { Component } from 'react';
import { Text, View , TouchableOpacity} from 'react-native';

export default class HelloWorldApp extends Component {
  render() {
    return (
      <View style={{ backgroundColor:'#e9ffc945',flex: 1,
       justifyContent: "center", alignItems: "center" }}>
        <Text style={{fontSize:26, color: "#85321b45",
        fontFamily: "PressStart2P"}}>Allah'u'Abha :)</Text>
        <TouchableOpacity
          style={{
            backgroundColor:'#a4a6fc19',
            padding: 95,
            borderRadius: 19,

          }}
        >
         <Text
           style={{
             color: "white",
             fontSize: 20
           }}
         >
           </Text>
         </TouchableOpacity>
      </View>
    );
  }
}

此外，我已经在 xcode 的项目目标中签入了我的副本包资源...文件就在那里。有什么想法吗？

【问题讨论】：

您在使用 PressStart2P-Regular 吗？
stackoverflow.com/a/57253751/8932231**请参考这个答案**

标签： reactjs react-native

【解决方案1】：

我认为您使用的是 iOS 无法识别的字体系列名称。而不是字体系列名称，您应该使用每种字体的 PostScript 名称

打开Font Book（Spotlight 类型FontBook）
选择您的字体并查看更多信息，它将如下所示

您需要将字体的 PostScript 名称 指定为 fontFamily 。否则 android 会工作，但 iOS 会报错。

这是您的 App.js

的更新代码库

import React, { Component } from 'react';
import { Text, View , TouchableOpacity} from 'react-native';

export default class HelloWorldApp extends Component {
  render() {
    return (
      <View style={{ backgroundColor:'#e9ffc945',flex: 1,
       justifyContent: "center", alignItems: "center" }}>
        <Text style={{fontSize:26, color: "#85321b45",
        fontFamily: "PressStart2P-Regular"}}>Allah'u'Abha :)</Text>
        <TouchableOpacity
          style={{
            backgroundColor:'#a4a6fc19',
            padding: 95,
            borderRadius: 19,

          }}
        >
         <Text
           style={{
             color: "white",
             fontSize: 20
           }}
         >
           </Text>
         </TouchableOpacity>
      </View>
    );
  }
}

之后再次链接您的资产并使用 xcode 清理项目并重建。
现在你准备好了……

确保在运行之前已链接资产并清理项目

【讨论】：

很好。非常感谢阿基拉！
@VP9 很高兴它有帮助:)

【解决方案2】：

推荐的方式是创建自己的组件，例如 MyAppText。 MyAppText 将是一个简单的组件，它使用您的通用样式呈现 Text 组件，并且可以通过其他道具等。

https://facebook.github.io/react-native/docs/text.html#limited-style-inheritance

【讨论】：