我想忽略系统操作字体(iOS 和 Android)并使用我在 react-native 项目中使用的各种字体。我只想做一次,但我不明白怎么做。你能帮帮我吗?
最佳答案
向 Assets 添加字体
将您想要的所有字体文件添加到 React Native 项目根目录中的“assets/fonts”文件夹
Package.json
接下来我们需要告诉 React Native 我们自定义字体的位置。我们通过将 rnpm 添加到提供字体文件路径的 package.json 来实现:
"rnpm": {
"assets": [
"./assets/fonts/"
]
},
然后我们告诉 React Native 为我们链接这些字体文件:
react-native link
在 IOS 上
这应该在 iOS 的 Info.plist 文件中添加字体引用,在 Android 上将字体文件复制到 android/app/src/main/assets/fonts。您可以通过打开 iOS 文件夹中的 Info.plist 并查找 UIAppFonts key 来验证这一点,您应该会看到类似于以下内容的内容:
<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
}
});
来源:
关于typescript - 如何在 react-native 中忽略操作系统字体?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56184341/