Question

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

无法识别的字体系列：sfproregular

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

与您一样，我在通过Terminal运行iOS版本时遇到了Unrecognized Font family问题。无论出于何种原因，它都不会影响最终的归档版本，也不会影响通过Xcode运行该版本。这是使用Xcode 12.0.1的macOS Catalina 10.15.7中最新的RN 0.63.3。

问题出在字体名称本身上。

解决方案摘要

对于您而言，我建议您执行以下步骤。

在macOS系统上安装字体sfprogregular
已安装字体并在“字体书”中选择了字体，请按CMD+I以查看脚本名称
将项目中的字体文件重命名为其各自的PostScript名称
在项目中运行npx react-native link以设置重命名的字体
在重命名之前清除旧字体文件（删除旧字体）
在引用样式中的字体时，将字体名称更改为代码中的脚本名称

我的经验详细

就我而言，我们正在使用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文件进行清理（只需在不再存在的每个红色字体文件上按Delete键），然后从文件夹{中的较旧的Android链接过程中删除该字体文件{1}}。在/android/app/src/main/assets/fonts/文件的info.plist部分下，删除较旧的字体文件名。

最后，在代码中，我们不再引用UIAppFonts，而是将其称为'Trade Gothic LT'。就是这样，现在就可以使用！

您可以通过在macOS和选定的字体簿中的.ttf文件（双击）上安装.ttf文件来找到字体的后记名称，按'TradeGothicLT'以获得有关字体的信息。

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

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

Answer 2

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

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

React-Native无法识别的字体系列错误

2 个答案:

解决方案摘要

我的经验详细