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

时间:2019-05-17 10:15:41

标签: typescript react-native fonts

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

1 个答案:

答案 0 :(得分:2)

将字体添加到资产

将所需的所有字体文件添加到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
  }
});

来源: