自定義字體在 React Native 中不起作用

Question

我想在我的應用程序中使用來自谷歌 fonts 的字體。 這是字體。

我已將 .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

對於版本 < 0.60 的 react-native 中的自定義字體，這里有很多答案

對於那些使用react-native version > 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 2

萬一有人因為他們的設置很好並且自定義字體在 iOS 上工作而在某些情況下在 Android 上不工作而正在閱讀這篇文章：

除了上面給出的安裝答案 - 確保您沒有設置字體fontWeight參數（或樣式中的其他額外字體轉換）。 在我的情況下，它“破壞”了自定義字體，所以我必須添加和使用帶有變體（如 Roboto-Thin、Roboto-Bold 等）的字體 ttf，而不是在樣式中設置粗體。

同樣值得注意的是：Manuel Hernandez 在下面的評論中發現可以使用 ie fontWeight:800代替fontWeight:'bold' 。

Answer 3

React Native 中的字體以與原生應用程序相同的方式處理，作為原生項目的資產。

在 iOS 中，您必須將它們添加為資源。 你可以在這里有一個很好的描述。

在 Android 中，您必須將它們添加為資產。 在這里你可以看到如何。

另請注意，iOS 中的字體名稱是 .ttf 文件的元數據中包含的名稱，而在 Android 中，它們由文件名和幾個后綴匹配。

Answer 4

我發現對於某些字體，您需要運行npx react-native-asset才能使其在 Android 上運行。 如果它在 3rd 方組件中不起作用，則必須添加fontWeight: 'normal'以覆蓋一些默認值。

Answer 5

您似乎沒有正確鏈接，或者您的應用程序沒有加載新資源。

添加

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

到你的 package.json。

然后

rm -rf node_modules && npm install && react-native link

如果一切順利，請在android/app/src/main/assets/fonts/中搜索您的自定義字體。 如果您看到它，則您已成功鏈接。

同樣，對於 iOS，運行 XCode 並為您的自定義字體展開資源下拉列表。

殺死你的模擬器並重試

react-native run-ios

Answer 6

路徑可能鏈接錯誤 -

react-native 鏈接存儲字體的路徑是 - android/src/main/assets/fonts

路徑應該是 - android/app/src/main/assets/fonts

即使使用 react-native 版本 0.62，這個問題仍然存在

Answer 7

確保字體僅為小寫並遵循以下模式：fontname.ttf、fontname_bold.ttf、fontname_light.ttf、fontname_bold_italic.ttf

Answer 8

刪除像 fontWeight 這樣的默認樣式屬性也可以解決這個問題。

Answer 9

要找到用作 fontFamily 的確切值，您可以在將以下代碼添加到 xcode 中的 AppDelegate.m 文件后從 xcode 運行項目。 您將在 xcode 的輸出部分中看到字體列表。

for (NSString* family in [UIFont familyNames])
{
    NSLog(@"%@", family);

    for (NSString* name in [UIFont fontNamesForFamilyName: family])
    {
        NSLog(@"  %@", name);
    }
}

添加自定義字體的有用鏈接：http: //codewithchris.com/common-mistakes-with-adding-custom-fonts-to-your-ios-app/

Answer 10

這些步驟對我有用。

1. 將字體添加到yourproject/assets文件夾。
2. 然后將"rnpm": {"assets": ["./assets/fonts/"]}添加到您的 package.json 文件中。
3. 運行react-native link
4. 檢查字體是否已添加到yourproject/android/app/src/main/assets/fonts （適用於 android）
5. 必須運行react-native run-android來獲取你的更改。（大多數人忘記運行這個）

Answer 11

在這里加上我的兩美分，因為我花了 4 個小時才弄清楚：檢查你的字體是否“有效”。 在 Mac 上，您可以在 Font Book > File > Validate font 中執行此操作。 React-Native 鏈接不會拋出任何錯誤，Android Studio 或 Xcode 也不會。 因此，如果您的字體已損壞，它將被忽略，您不知道為什么。 為了使它有效，我從 Font Book 中導出它並再次運行 react-native link 命令。 希望它可以幫助某人。

Answer 12

我面臨着類似的問題。 我所有的字體設置都很好，所有自定義字體都可以正常工作，除了 IOS 中的一種。

如果您查看屏幕截圖，您會發現全名實際上與文件名並不完全相同。

您還可以通過在 appdelegate.m 中添加以下代碼來列出所有應用程序可用的字體名稱。

for (NSString* family in [UIFont familyNames]){
   NSLog(@"%@", family);
   for (NSString* name in [UIFont fontNamesForFamilyName: family]){
       NSLog(@"  %@", name);
   }
}

您將不得不使用將打印在 xcode 日志上的 ios 名稱。 我做了這樣的事情

Platform.OS === 'ios' ? 'Agrandir-TextBold' : 'Agrandir-Bold'

Answer 13

這個問題的答案是

刪除 fontWeight 屬性是樣式，它將起作用！

我刪除了它並立即獲得了我的 poppins 字體樣式。

Answer 14

我的項目是特定於 Android 的，我們沒有 ios。 我已經嘗試了答案中的所有選項，但沒有解決問題，發現問題出在npx react-native link命令上。 它實際上首先循環所有項目，然后是 android。

我試過npx react-native link --platforms android但它沒有用。

因此，我刪除了項目中的 ios 目錄並運行命令npx react-native link ，它成功地為 android 鏈接了新資產。 您可以簡單地再次恢復 ios 目錄。

Answer 15

我有一個類似的問題。 對我來說，在本地構建應用程序時字體加載良好，但當應用程序由我們的 CI 管道構建時它們無法加載。

事實證明，當我更改文件名的大小寫以匹配 iOS 標識符時，大小寫更改沒有被 git 拾取。 它似乎忽略了文件名的大小寫變化。 檢查遠程存儲庫中的文件名是否與您機器上的文件名匹配。 在 git 上更新文件名可能有一種更直接的方式，但我只是移動了字體文件夾，提交並將它們移回：

mv assets/fonts assets/fonts2
mv android/app/src/main/assets android/app/src/main/assets2
git commit -m "Make git pick up on correct font casing - part 1"
mv assets/fonts2 assets/fonts
mv android/app/src/main/assets2 android/app/src/main/assets
git commit -m "Make git pick up on correct font casing - part 2"

Answer 16

我的字體可以完美地顯示在 android 上，但不會顯示在 ios 上。 我嘗試了一切，但沒有什么對我真正有用，直到我嘗試查看我的資產文件夾中安裝的其他字體是否會顯示。 其他字體確實有效。 所以我決定刪除我想要使用的字體（gotham-medium）並從互聯網上重新下載了相同字體的不同文件，然后將其包含到我的代碼中。 現在它起作用了！ 贊美神！ 我花了 2 天時間試圖解決這個問題！

Answer 17

我不知道這是否會對任何人有所幫助。

但是當我嘗試了上面的所有建議並且沒有任何效果時，我只是跑了

世博醫生 --fix-dependencies

然后我所有的依賴項都更新到了所需的兼容版本，這解決了這個問題。

Answer 18

對我來說，經過多次嘗試后的工作步驟

注意：在我解決之前我的文件名是react-native.config.js在我的文件里面有下面的代碼

/* eslint-disable prettier/prettier */
 module.exports = {
  project: {
  ios: {},
  android: {}, // grouped into "project"
 },
assets: ['./assets/fonts/'], // where you put your custom fonts
};

解決方案：

1. 只需將react-native.config.js更改為react-native-config.js
2. npx 反應本機鏈接
3. 重新運行你的項目
4. npx 反應原生啟動
5. npx react-native run-android
6. 編碼愉快😊😊

Answer 19

就我而言，我必須根據操作系統做一些條件樣式

<Text style={{fontFamily:'Nunito-Bold',fontWeight: Platform.OS === 'android' ? '':'bold' }}>Some text goes here</Text>

因為我使用的字體類型在 iOS 上似乎很薄，即使樣式是bold ，如果我指定fontWeight ，我的自定義字體在 Android 上也不起作用。

這是從 React Native 0.70.0工作的。

Answer 20

我想在我的應用中使用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'的EXACT值？