添加自定义字体系列以响应本机文本不起作用

Question

我目前正在尝试向本机应用程序添加自定义字体，但在尝试了几乎所有我能在 SO 和谷歌上找到的答案后，它仍然不起作用。我试图通过添加让 React Native 意识到字体"rnpm": {"assets": [  "./assets/fonts/"]},对package.json，然后运行react-native link，并使用re-runcommad。但仍然不起作用。下面是代码应用程序.jsimport React, { useEffect } from 'react';import { StyleSheet, Text, View, Image } from 'react-native';import imager from './assets/cars.png';import * as Font from 'expo-font';export default function App() {  useEffect(() => {    async function loadFont() {      return await Font.loadAsync({        righteous: require('./assets/fonts/Righteous-Regular.ttf'),      });    }    loadFont();  }, []);  return (    <View style={styles.container}>      <Image style={styles.imager} source={imager} />      <Text        style={{          fontSize: 30,          fontWeight: 'bold',          paddingTop: 30,          fontFamily: 'righteous',        }}      >        Request Ride      </Text>      <Text style={{ fontSize: 15, padding: 40, textAlign: 'center' }}>        Request a ride and get picked up by a nearby community driver      </Text>    </View>  );}const styles = StyleSheet.create({  container: {    flex: 1,    backgroundColor: '#fff',    alignItems: 'center',    justifyContent: 'center',  },  imager: {    width: 200,    height: 200,    shadowColor: 'rgba(0, 0, 0, 0.2)',    shadowRadius: 10,    shadowOpacity: 1,  }, });我有字体Righteous-Regular.ttf，./assets/fonts但是当我运行此代码时，出现此错误fontFamily "righteous" 不是系统字体，也没有通过 Font.loadAsync 加载。如果您打算使用系统字体，请确保您输入的名称正确并且您的设备操作系统支持它。如果这是自定义字体，请务必使用 Font.loadAsync 加载它。我研究过，但仍然找不到解决方案。请问可能是什么问题，我该如何解决？

Answer 1

您正在尝试在加载字体之前使用该字体。你需要做这样的事情。

import React, { useEffect, useState } from 'react';

import { StyleSheet, Text, View, Image } from 'react-native';

import imager from './assets/cars.png';

import * as Font from 'expo-font';

export default function App() {

  // use state for font status.

  const [isFontReady, setFontReady] = useState(false)

  useEffect(() => {

    async function loadFont() {

      return await Font.loadAsync({

        righteous: require('./assets/fonts/Righteous-Regular.ttf'),

      });

    }

    // after the loading set the font status to true

    loadFont().then(() => {

      setFontReady(true)

    });

  }, []);

  return (

    <View style={styles.container}>

      <Image style={styles.imager} source={imager} />

      {/* render the text after loading */}

      {isFontReady && <Text

        style={{

          fontSize: 30,

          fontWeight: 'bold',

          paddingTop: 30,

          fontFamily: 'righteous',

        }}

      >

        Request Ride

      </Text>}

      <Text style={{ fontSize: 15, padding: 40, textAlign: 'center' }}>

        Request a ride and get picked up by a nearby community driver

      </Text>

    </View>

  );

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: '#fff',

    alignItems: 'center',

    justifyContent: 'center',

  },

  imager: {

    width: 200,

    height: 200,

    shadowColor: 'rgba(0, 0, 0, 0.2)',

    shadowRadius: 10,

    shadowOpacity: 1,

  },

 });

您可以在安装字体后显示元素，或者之前使用不同的字体显示元素。

Answer 2

您是否使用大于或等于 0.60 的 react-native？你所做的在我的项目中有效，但我的项目低于 react-native 0.60。高于 0.60，显然您必须更改 react-native.config.js 而不是更改 package.json。这是一个教程的链接，该链接介绍了该差异。它位于教程的第 3 步：https : //medium.com/@mehran.khan/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4