时间戳

首页 > 解决方案 > 如何在 react-native 中忽略操作系统字体？

typescript - 如何在 react-native 中忽略操作系统字体？

问题描述

我想忽略系统操作字体（iOS 和 Android）并使用我在 react-native 项目中使用的各种字体。我只想做一次，但我不明白怎么做。你能帮助我吗？

标签： typescriptreact-nativefonts

解决方案

将字体添加到资产

将您想要的所有字体文件添加到 react native 项目根目录中的“assets/fonts”文件夹中

包.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>UIAppFonts</key>
    <array>
        <string>YOUR_FONT_FILE.ttf</string>
    </array>

在安卓上

如果您查看文件路径“android/app/src/main/assets/fonts/”，您应该会看到您的字体已被复制：

反应原生样式

随着您的字体嵌入和引用，将它们添加到您的 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
  }
});

资料来源：

推荐阅读