사용자 정의 글꼴이 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' 
    } 
} 

안드로이드에서는 새로운 글꼴을 보여하지만 오류가하지 않습니다. 오류 있음 :

Unrecognised font family "Orbitron"

내가 뭘 잘못하고 있니?

어떻게 fontFamily: 'xxx'에 배치 할 정확한 값을 알 수 있습니까?

Answer 1

글꼴의 기본 프로젝트에 자산으로, 네이티브 애플리케이션과 동일한 방식으로 처리되는 기본 반응한다.

iOS에서는 리소스로 추가해야합니다. 당신은 좋은 설명 here을 가질 수 있습니다.

Android에서는 애셋으로 추가해야합니다. Here 당신은 방법을 볼 수 있습니다.

또한 안드로이드에 그들이 파일 이름과 여러 접미사가 일치하는 반면, 아이폰 OS에서 글꼴의 이름, TTF 파일의 메타 데이터에 포함 된 하나 있습니다.

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를 실행하고 사용자 정의 글꼴에 대한 리소스 드롭 다운을 확장하십시오.

은 에뮬레이터를 죽이고 엑스 코드에 AppDelegate.m 파일에 다음 코드를 추가 한 후

react-native run-ios 

Answer 3

당신의 font로 사용할 정확한 값을 찾으려면, 당신은 엑스 코드에서 프로젝트를 실행할 수 다시 시도하십시오. 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/