web-dev-qa-db-ja.com

カスタムフォントが機能しないReactネイティブ

アプリでGoogleFontsのフォントを使用したい。 これがフォントです 。

.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'に配置する正確な値を見つけるにはどうすればよいですか？

androidiosreactjsreact-native
6
user2602079

react-native for version <0.6のカスタムフォントについて多くの回答があります

react-native version> 0.6、'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コマンドを使用して実行します

14
Harshit Agrawal

React Nativeのフォントは、ネイティブアプリケーションの場合と同じように、ネイティブプロジェクトのアセットとして処理されます。

IOSでは、それらをリソースとして追加する必要があります。あなたは良い説明を持つことができます ここ 。

Androidでは、アセットとして追加する必要があります。 ここ 方法を確認できます。

また、iOSのフォントの名前は、.ttfファイルのメタデータに含まれている名前ですが、Androidでは、ファイル名といくつかのサフィックスによって一致します。

3
martinarroyo

正しくリンクされていないか、アプリが新しいリソースを読み込んでいないようです。

追加

"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
3
user1941489

セットアップが正常でカスタムフォントがiOSで機能し、場合によってはAndroidで機能しないために、誰かがこれを読んでいる場合：

上記のインストールの回答に加えて、font fontWeightパラメーター（またはスタイル内の他の追加のフォント変換）を設定していないことを確認してください。私の場合、カスタムフォントを「壊した」ので、スタイルを太字に設定する代わりに、フォントttfをバリアントとともに追加して使用（Roboto-Thin、Roboto-Boldなど）する必要がありました。

また、注目に値するのは、Manuel Hernandezが以下のコメントで、fontWeight:800の代わりにfontWeight:'bold'を使用できることを発見したことです。

2
deevee

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/

1
Kelley Rose

パスが正しくリンクされていない可能性があります-

React-nativeリンクがフォントを保存したパスは--Android/src/main/assets/fonts

パスは-Android/app/src/main/assets/fonts

React-nativeバージョン0.62でも、この問題は終了します

0
Harsh Vitra

これらの手順は私のために働いた。

  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を実行する必要があります（ほとんどの人はこれを実行するのを忘れています）
0
Vishal Sain

一部のフォントでは、Androidで動作させるためにnpx react-native-assetを実行する必要があることがわかりました。サードパーティのコンポーネント内で機能しない場合は、fontWeight: 'normal'を追加して、いくつかのデフォルト値を上書きする必要があります。

0
M_droid