如何在React Native中忽略操作系统字体？

Question

如何在React Native中忽略操作系统字体？

typescriptreact-nativefonts

4

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

- matteog

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- hakkikonu · Accepted Answer

添加字体到资源中

将所有想要的字体文件添加到React Native项目根目录下的“assets/fonts”文件夹中。

Package.json

接下来，我们需要告诉React Native我们的自定义字体存放的位置。我们可以通过在package.json文件中添加rnpm并提供字体文件路径来实现：

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

然后，我们告诉React Native为我们链接这些字体文件：

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: