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

Question

我目前正在尝试将自定义字体添加到 React 本机应用程序，但是在尝试了我在 SO 和 google 上可以找到的几乎所有答案之后，它仍然不起作用。

我试图通过添加

让 React Native 知道字体

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

},

到 package.json 然后运行宁 react-native link 并且还使用 re-run 命令。但是还是不行。

下面是代码

app.js

import 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,
  },
 });

我在 ./assets/fonts 中有字体 Righteous-Regular.ttf 但是当我运行这个代码时，我得到这个错误

fontFamily "righteous" is not a system font and has not been loaded through Font.loadAsync.

If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

If this is a custom font, be sure to load it with Font.loadAsync.

我研究过，但仍然找不到解决方法。请问可能是什么问题，我该如何解决？

Answer 1

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

Answer 2

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

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,
  },
 });

安装字体后显示元素还是之前用不同的字体显示元素由您决定。

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

Adding Custom font family to react native Text not working

javascript

fonts

reactjs

react-native

expo