カスタムフォントがReact Nativeで動作しない

Question

私のアプリでGoogleフォントのフォントを使いたいです。 Here is the font。

app/fontsに.ttfファイルを配置しました。

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' 
    } 
} 

アンドロイドでは、それは新しいフォントを示すが、誤りがないことはありません。 iOSにエラーがあります：

Unrecognised font family "Orbitron"

私は間違っていますか？

正確な値はfontFamily: 'xxx'にありますか？

Answer 1

リアクションネイティブのフォントは、ネイティブアプリケーションと同じ方法で、ネイティブプロジェクトのアセットとして処理されます。

iOSでは、リソースとして追加する必要があります。あなたは良い記述hereを持つことができます。

Androidでは、それらをアセットとして追加する必要があります。 Hereをご覧ください。

また、iOSのフォント名は.ttfファイルのメタデータに含まれていますが、Androidではファイル名といくつかの接尾辞が一致しています。

Answer 2

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

あなたのpackage.jsonに

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

を追加します。物事が右に行けば

その後

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

、カスタムフォントをandroid/app/src/main/assets/fonts/内を検索します。 これが表示されたら、正常にリンクしました。

iOSの場合と同様に、XCodeを実行し、カスタムフォントのリソースドロップダウンを展開します。

があなたのfontFamilyとして使用するための正確な値を見つけるためにあなたのエミュレータ、再試行してください

react-native run-ios 

Answer 3

を殺し、あなたは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/