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

Question

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

我试图通过添加使 React Native 知道字体

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

}，

到package.json，然后运行react-native link并使用re-runcommad。但仍然不起作用。

下面是代码

应用.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" 不是系统字体，尚未通过 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。这是指向介绍该差异的教程的链接。它位于教程的 steop 3 中：https://medium.com/@mehran.khan/ultimate-guide-to-use-custom-fonts-in-react-native-77fcdf859cf4