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

标签 typescript react-native fonts

我想忽略系统操作字体(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/

相关文章:

css - Visual Studio 2015 中的 LESS

jquery - 如何在 typescript 中创建无效的 JQueryPromise?

javascript - 在 React Native App 中进行错误处理的最佳方式是什么。

html - 如何在 CSS 中垂直和水平居中具有不同字体大小的文本

react-native - TypeError : props. navigation.getParam 不是函数。在( Prop .navigation.getParam ('name')

ios - 尽管规则设置为私有(private),但我的 firebase 存储不是私有(private)的

css - 为什么我不能用 Angular5 显示 Font-Awesome

jquery - Angular 4 缩放

typescript - 如何在 typescript 转换器中创建常量赋值?

typescript 中的 Angular : how to pass generic Type to function