要将自定义字体添加到您的应用程序中,请将所有ttf文件存储在一个目录中。 将以下代码添加到您的package.json文件中:
"rnpm": {
"assets": [
"./fonts" // 您的字体目录
]
}
然后运行react-native link
要使用该字体,请在fontFamily中使用与ttf文件相同的名称。
sans-serif-light
和Roboto
是仅适用于Android的字体,您需要为iOS使用不同的字体。此代码库中列出了可用于iOS和Android的字体列表- https://github.com/react-native-training/react-native-fonts
您可以使用Platform.select()
来针对每个操作系统选择不同的字体。
title: {
...Platform.select({
ios: { fontFamily: 'Arial', },
android: { fontFamily: 'Roboto' }
})
}
rnpm
命令已经弃用,您可以使用React Native CLI配置来添加自定义资源。
https://github.com/react-native-community/cli/blob/master/docs/configuration.md
要在项目中添加字体:
react-native.config.js
的文件,然后添加以下代码:module.exports={
assets:[
"./assets/fonts"
]
}
运行 react-native link
运行项目:npx react-native run-ios
注意:如果 IOS 构建失败,请打开 Xcode 工作区设置并将构建系统更改为 Legacy Build System。
由于Roboto是Android的默认字体家族,我们可以将Roboto添加到iOS中并仅使用RRikesh的解决方案来省略Android的fontFamily
属性:
import {
Platform,
StyleSheet,
} from 'react-native'
const stylesByPlatform = Platform.select({
ios: { fontFamily: 'Roboto' },
android: { },
})
export default StyleSheet.create({
text: {
...stylesByPlatform,
color: '#000000',
},
})
对于iOS,我们需要添加Roboto字体族:
./assets/fonts/Roboto
Add assets folder to your package.json:
{
...
"rnpm": {
"assets": [
"./assets/fonts"
]
}
}
Run: react-native link
(it links ttf files on iOS and copy them on Android)
android/app/src/main/assets/fonts
我真的不知道为什么这种类型的内容不在官方文档中。 :(
<key>UIAppFonts</key>
<array>
<string>Roboto-Black.ttf</string>
</array>
对于react-native +v0.69,npx react-native link
会产生错误。如果您正在使用此版本的react-native,则解决方案是:
npm i react-native-asset
或yarn add react-native-asset
在项目的根文件夹中创建一个react-native.config.js
文件。
将以下内容添加到文件中
module.exports = { project: { ios: {}, android: {}, }, assets: ['./assets/fonts/'], };
在项目的根目录下创建一个assets/fonts
文件夹。
然后在终端中运行npx react-native-asset
。
这应该可以解决您的问题。
NB:从rn-v0.69开始,react-native link
已停用,并替换为autolinking
,但此功能无法将自定义字体添加到您的项目中,因此react-native-asset
提供与react-native link
相同的修复程序。
react-native link
- stkvtflw