自定义字体在React Native中不起作用

Question

我想在我的应用中使用Google字体中的一种字体。这是字体。

我已将.ttf文件放在中app/fonts。

package.json：

{
    "name": "xxx",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "rnpm": {
        "assets": ["./app/fonts"]
    },
    "jest": {
        "preset": "react-native",
        "moduleNameMapper": {
            "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
            "\\.(css|less)$": "<rootDir>/__mocks__/styleMock.js"
        }
    },
    "dependencies": {
        "flow-typed": "^2.0.0",
        "immutable": "^3.8.1",
        "react": "~15.4.1",
        "react-native": "0.42.0",
        "react-native-vector-icons": "^4.0.0",
        "react-redux": "^5.0.3",
        "redux": "^3.6.0",
        "redux-immutable": "^4.0.0",
        "redux-observable": "^0.14.1",
        "rxjs": "^5.2.0"
    },
    "devDependencies": {
        "babel-eslint": "^7.1.1",
        "babel-jest": "19.0.0",
        "babel-preset-react-native": "1.9.1",
        "eslint": "^3.17.0",
        "eslint-plugin-flowtype": "^2.30.3",
        "eslint-plugin-jsx": "^0.0.2",
        "eslint-plugin-react": "^6.10.0",
        "eslint-plugin-react-native": "^2.3.1",
        "flow-bin": "^0.42.0",
        "jest": "19.0.2",
        "jest-cli": "^19.0.2",
        "react-test-renderer": "~15.4.1",
        "redux-devtools": "^3.3.2",
        "remote-redux-devtools": "^0.5.7"
    }
}

然后跑了react-native link。

然后在我的应用程序中使用字体：

import { View, Text } from 'react-native'
import React from 'react'
import Width from '../width/Width'
import Shape from '../shape/Shape'
import Height from '../height/Height'
import Thickness from '../thickness/Thickness'

export const Volcalc = () => (
  <View style={styles.container}>
    <Text style={styles.text}>SHAPE</Text>
    <Shape />
    <Text style={styles.text}>HEIGHT</Text>
    <Height />
    <Text style={styles.text}>WIDTH</Text>
    <Width />
    <Text style={styles.text}>THICKNESS</Text>
    <Thickness />
  </View>
)

const $mainColor = '#00d1b2'
const styles = {
  container: {
    flex: 1,
    padding: 20,
    backgroundColor: $mainColor
  },
  text: {
    textAlign: 'center',
    color: 'rgba(255, 255, 255, 0.9)',
    fontSize: 15,
    fontFamily: 'Orbitron'
  }
}

在android中，它不显示新字体，但没有错误。在ios中有错误：

无法识别的字体家族“ Orbitron”

我究竟做错了什么？

我如何找出要放置的精确值fontFamily: 'xxx'？

Answer 1

如果有人因为他们的设置很好并且自定义字体在 iOS 上工作而在某些情况下在 Android 上不起作用而阅读本文：

除了上面给出的安装答案 - 确保您没有设置字体fontWeight参数（或样式中的其他额外字体转换）。就我而言，它“破坏”了自定义字体，因此我必须添加和使用带有变体（如 Roboto-Thin、Roboto-Bold 等）的字体 ttf，而不是在样式中设置粗体。

同样值得注意的是：Manuel Hernandez 在下面的评论中发现可以使用 iefontWeight:800代替fontWeight:'bold'.

Answer 2

对于版本<0.60的react-native，自定义字体有很多答案

对于使用react-native版本> 0.60的用户，'rnpm' is deprecated自定义字体将不起作用。

现在，要在react-native版本> 0.60中添加自定义字体，您将必须：

1- react-native.config.js在项目的根文件夹中创建一个名为的文件。

2-在新文件中添加

module.exports = {
project: {
    ios: {},
    android: {},
},
assets: ['./assets/fonts']
};

3- react-native link在根项目路径中运行命令。

4-使用react-native run-android或react-native run-ios命令运行

Answer 3

React Native 中的字体以与原生应用程序相同的方式处理，作为原生项目的资产。

在 iOS 中，您必须将它们添加为资源。你可以在这里有一个很好的描述。

在 Android 中，您必须将它们添加为资产。在这里你可以看到如何。

另请注意，iOS 中的字体名称是包含在 .ttf 文件的元数据中的名称，而在 Android 中，它们由文件名和几个后缀匹配。

Answer 4

我发现对于某些字体，您需要运行npx react-native-asset才能使其在 Android 上运行。如果它在 3rd 方组件中不起作用，则必须添加fontWeight: 'normal'以覆盖一些默认值。