Question

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

Answer 1

将字体添加到资产

将所需的所有字体文件添加到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>UIAppFonts</key>
    <array>
        <string>YOUR_FONT_FILE.ttf</string>
    </array>

在Android上

如果您在文件路径“ 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
  }
});

来源：

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

1 个答案: