我想忽略系统操作字体(iOS 和 Android),并使用我在 react-native 项目中使用的各种字体。我想只做一次,但是我不明白如何操作。你能帮我吗?
我想忽略系统操作字体(iOS 和 Android),并使用我在 react-native 项目中使用的各种字体。我想只做一次,但是我不明白如何操作。你能帮我吗?
添加字体到资源中
将所有想要的字体文件添加到React Native项目根目录下的“assets/fonts”文件夹中。
Package.json
接下来,我们需要告诉React Native我们的自定义字体存放的位置。我们可以通过在package.json文件中添加rnpm并提供字体文件路径来实现:
"rnpm": {
"assets": [
"./assets/fonts/"
]
},
react-native link
在 iOS 上
您需要将字体引用添加到 Info.plist 文件中,以便在 iOS 上使用。在 Android 上,您需要将字体文件复制到 android/app/src/main/assets/fonts 目录下。您可以通过打开 iOS 文件夹中的 Info.plist 文件并查找 UIAppFonts 键来验证此操作,应该会看到类似以下内容:
<key>UIAppFonts</key>
<array>
<string>YOUR_FONT_FILE.ttf</string>
</array>
在Android上
如果您查看文件路径“android / app / src / main / assets / fonts /”,您应该会看到已复制您的字体:
React Native 样式
当您的字体嵌入并引用后,只需将它们添加到您的React Native样式中即可。只需添加一个具有您的字体名称的 fontFamily 属性:
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "#F5FCFF"
},
foo: {
fontFamily: "YOUR_FONT_FAMILY_NAME",
fontSize: 30,
textAlign: "center",
margin: 10
},
bar: {
fontFamily: "YOUR_FONT_FAMILY_NAME",
fontSize: 20,
textAlign: "center",
color: "#333333",
marginBottom: 5
}
});
Sources: