Question

我目前正在尝试向React Native应用添加自定义字体，但是尝试了我可以在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,
  },
 });

我在Righteous-Regular.ttf中使用了字体./assets/fonts，但是当我运行此代码时，出现此错误

fontFamily“正义”不是系统字体，并且尚未通过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吗？您所做的工作在我的项目中有效，但是我的项目低于本机响应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

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

2 个答案: