React-native unrecognized font family error

Question

我想在我的 react-native 项目中使用自定义字体，但在 ios 模拟器上出现错误 我该如何解决它
我尝试了各种方法，但找不到解决方案。

无法识别的字体系列：sfproregular

错误： Error Screenshot

项目结构： Project structure screenshot

react-native.config.js

module.exports = {
    project: {
      ios: {},
      android: {}, // grouped into "project"
    },
    assets: ["./assets/fonts/"], // stays the same
  };

版本

 "react": "16.13.1",
    "react-native": "0.63.2",
    "react-native-gesture-handler": "^1.7.0",
    "react-native-phone-input": "^0.2.4",
    "react-navigation": "^4.4.0"

我想使用“Welcome.js”中的字体

Welcome.js

import React from 'react';
import {
  SafeAreaView,
  StyleSheet,
  ScrollView,
  View,
  Text,
  Image,
  StatusBar,
  TouchableOpacity,
  Button,
  ImageBackground,
} from 'react-native';

import Logo from '../components/WelcomeLogo';

import arkaplan from '../assets/images/arkaplan.png';


export default class Welcome extends React.Component {

  render() {

  return (
    <>
    <ImageBackground source={arkaplan}  style={styles.constrain} >
    <StatusBar barStyle="light-content"/>
    <Logo />

    
    <Text style={styles.welcome} >Welcome!</Text>


    </View>
    </>
  )
  
  }
};
 

const styles = StyleSheet.create({

  constrain: {
    flex: 1, 
    alignItems:'center', 
    justifyContent:'center',
    

  welcome: {
    fontSize: 50,
    color: 'white',
    fontFamily: 'sfprogregular',
    marginTop: 20,
    marginBottom: 5,
  },

});

Answer 1

和你一样，我在通过终端运行 iOS 构建时遇到了这个Unrecognized Font family 问题。无论出于何种原因，它都不会影响最终的归档构建，或者是否通过 Xcode 运行构建。这是在带有 Xcode 12.0.1 的 macOS Catalina 10.15.7 中的最新 RN 0.63.3 上。

问题在于字体名称本身。

解决方案总结

对于您的情况，我建议采取以下步骤。

1. 在您的 macOS 系统上安装您的字体 sfprogregular
2. 安装字体并在字体册中选择字体后按CMD+I 以查看后记名称
3. 将项目中的字体文件重命名为各自的 PostScript 名称
4. 在您的项目中运行 npx react-native link 以设置重命名的字体
5. 在重命名之前清理旧字体文件（删除旧字体）
6. 在样式中引用字体时，将字体名称更改为代码中的后记名称

我的经验详解

就我而言，我们使用的是 TradeGothic。

最初，当我们链接字体时，字体文件本身的名称是： Trade Gothic LT.ttf

Android 可以，但 iOS 不行。这是因为 Android 依赖于文件名，而 iOS 依赖于字体的 PostScript 名称。

为了解决这个问题，我将 ttf 文件重命名为它的后记名称 TradeGothicLT.ttf。对于 Trade Gothic LT Bold.ttf 的粗体，我将其重命名为 TradeGothicLT-Bold.ttf。

然后我在我的项目中做了npx react-native link 来连接我新重命名的字体。然后，我通过从资源下的 XCode 项目中删除旧的 .ttf 文件进行清理（只需在每个不再存在的红色字体文件上按删除）并从文件夹 @ 中的旧 Android 链接进程中删除字体文件987654330@。在info.plist 文件中，在UIAppFonts 部分下删除旧字体文件名。

最后在代码中，我们现在将其称为'TradeGothicLT'，而不是引用'Trade Gothic LT'。就是这样，它现在可以工作了！

您可以通过在 macOS 上安装 .ttf 文件（双击它）来找到字体的后记名称，并在选择字体的字体册中按 CMD+I 以获取有关字体的信息。

注意： 不必将字体安装到 macOS，这只是我所知道的获取 PostScript 名称的唯一方法。如果您已经拥有字体的 PostScript 名称，则无需安装它们。

我希望这对您和其他可能偶然发现此问题的人有所帮助！

Answer 2

添加自定义字体后，需要使用react-native link链接。 这将在 Info.plist 文件 (iOS) 和 android/src/main/assets/fonts/ 目录 (Android) 中创建一个条目。

如果上述命令失败，需要在android目录&plist文件中手动添加这些字体。