[react-native] React Native에서 기본 글꼴 패밀리를 설정하는 방법은 무엇입니까?

앱이 모든 곳에서 동일한 글꼴을 사용하도록 React Native에이 CSS와 동등한 것이 있습니까?

body {
  font-family: 'Open Sans';
}

모든 텍스트 노드에 수동으로 적용하는 것은 지나치게 복잡해 보입니다.



답변

권장되는 방법은 MyAppText와 같은 고유 한 구성 요소를 만드는 것입니다. MyAppText는 범용 스타일을 사용하여 텍스트 구성 요소를 렌더링하고 다른 소품 등을 통과 할 수있는 간단한 구성 요소입니다.

https://facebook.github.io/react-native/docs/text.html#limited-style-inheritance


답변

최근에이 문제를 해결하기 위해 만들어진 노드 모듈이 있으므로 다른 구성 요소만들 필요가 없습니다 .

https://github.com/Ajackster/react-native-global-props

https://www.npmjs.com/package/react-native-global-props

문서에는 최상위 구성 요소에서 setCustomText이와 같이 함수를 가져 오는 것으로 나와 있습니다.

import { setCustomText } from 'react-native-global-props';

그런 다음 반응 네이티브 Text구성 요소에 대해 원하는 사용자 지정 스타일 / 소품을 만듭니다 . 귀하의 경우 fontFamily 가 모든 Text구성 요소 에서 작동하기 를 원합니다 .

const customTextProps = {
  style: {
    fontFamily: yourFont
  }
}

setCustomText함수를 호출하고 소품 / 스타일을 함수에 전달합니다.

setCustomText(customTextProps);

그런 다음 모든 반응 네이티브 Text구성 요소에는 사용자가 제공하는 다른 소품 / 스타일과 함께 선언 된 fontFamily 가 있습니다 .


답변

React Native 0.56.0+의 경우 defaultProps가 먼저 정의되었는지 확인하십시오.

Text.defaultProps = Text.defaultProps || {}

그런 다음 다음을 추가하십시오.

Text.defaultProps.style =  { fontFamily: 'some_font' }

App.js 파일 (또는 가지고있는 루트 구성 요소)의 생성자에 위를 추가합니다.

스타일을 무시하기 위해 당신은 (예를 들어 스타일 객체를 생성하고 다음 추가 스타일을 추가 확산 될 수 있습니다 { ...baseStyle, fontSize: 16 })


답변

Text를 사용하여 구성 요소에 다음을 추가하여 Text 동작을 재정의 할 수 있습니다.

let oldRender = Text.prototype.render;
Text.prototype.render = function (...args) {
    let origin = oldRender.call(this, ...args);
    return React.cloneElement(origin, {
        style: [{color: 'red', fontFamily: 'Arial'}, origin.props.style]
    });
};

편집 : React Native 0.56 이후로 Text.prototype더 이상 작동하지 않습니다. 다음을 제거해야합니다 .prototype.

let oldRender = Text.render;
Text.render = function (...args) {
    let origin = oldRender.call(this, ...args);
    return React.cloneElement(origin, {
        style: [{color: 'red', fontFamily: 'Arial'}, origin.props.style]
    });
};


답변

React-Native 0.56에서는 위의 변경 방법이 Text.prototype.render더 이상 작동하지 않으므로 자신의 구성 요소를 사용해야하며 한 줄로 수행 할 수 있습니다!

MyText.js

export default props => <Text {...props} style={[{fontFamily: 'Helvetica'}, props.style]}>{props.children}</Text>

AnotherComponent.js

import Text from './MyText';

...
<Text>This will show in default font.</Text>
...


답변

이 함수를 루트 App구성 요소에 추가 한 다음이 지침에 따라 글꼴을 추가 한 후 생성자에서 실행합니다. https://medium.com/react-native-training/react-native-custom-fonts-ccc9aacf9e5e

import {Text, TextInput} from 'react-native'

SetDefaultFontFamily = () => {
    let components = [Text, TextInput]

    const customProps = {
        style: {
            fontFamily: "Rubik"
        }
    }

    for(let i = 0; i < components.length; i++) {
        const TextRender = components[i].prototype.render;
        const initialDefaultProps = components[i].prototype.constructor.defaultProps;
        components[i].prototype.constructor.defaultProps = {
            ...initialDefaultProps,
            ...customProps,
        }
        components[i].prototype.render = function render() {
            let oldProps = this.props;
            this.props = { ...this.props, style: [customProps.style, this.props.style] };
            try {
                return TextRender.apply(this, arguments);
            } finally {
                this.props = oldProps;
            }
        };
    }
}


답변

이 스레드에 매우 늦었지만 여기에 있습니다.

TLDR; 다음 블록을 추가하십시오.AppDelegate.m

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{

 ....
    // HERE: replace "Verlag" with your font
  [[UILabel appearance] setFont:[UIFont fontWithName:@"Verlag" size:17.0]];
  ....
}

전체 흐름의 연습.

플러그인을 사용하지 react-native-global-props않고이 작업을 수행 할 수있는 몇 가지 방법이 있으므로 단계별로 안내해 드리겠습니다.

플랫폼에 글꼴 추가.

IOS 프로젝트에 글꼴을 추가하는 방법

먼저 자산의 위치를 ​​생성하겠습니다. 루트에 다음 디렉토리를 만드십시오.

“`

ios/
static/
       fonts/

“`

이제 package.json에 “React Native”NPM을 추가하겠습니다.

  "rnpm": {
    "static": [
   "./static/fonts/"
    ]
  }

이제 “반응 네이티브 링크”를 실행하여 네이티브 앱에 자산을 추가 할 수 있습니다.

수동으로 확인하거나 수행합니다.

프로젝트에 글꼴 이름을 추가해야합니다 .plist
(VS 코드 사용자 code ios/*/Info.plist가 확인을 위해 실행 하는 경우).

여기에 Verlag추가 한 글꼴이 다음과 같아야 한다고 가정 합니다.

     <dict>
   <plist>
      .....
      <key>UIAppFonts</key>
      <array>
         <string>Verlag Bold Italic.otf</string>
         <string>Verlag Book Italic.otf</string>
         <string>Verlag Light.otf</string>
         <string>Verlag XLight Italic.otf</string>
         <string>Verlag XLight.otf</string>
         <string>Verlag-Black.otf</string>
         <string>Verlag-BlackItalic.otf</string>
         <string>Verlag-Bold.otf</string>
         <string>Verlag-Book.otf</string>
         <string>Verlag-LightItalic.otf</string>
      </array>
      ....
</dict>
</plist>

이제 매핑 했으므로 이제 실제로 거기에 있고로드되고 있는지 확인합니다 (이것은 수동으로 수행하는 방법이기도합니다).

으로 이동하여 "Build Phase" > "Copy Bundler Resource"작동하지 않으면 여기에 수동으로 추가합니다.

1_uuz0__3kx2vvguz37bhvya

글꼴 이름 가져 오기 (XCode에서 인식)

먼저 다음과 같이 XCode 로그를 엽니 다.

XXXX

그런 다음 다음 블록을 추가 AppDelegate.m하여 글꼴 및 글꼴 패밀리의 이름을 기록 할 수 있습니다 .

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{
    .....


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

  ...
}

실행하면 올바르게로드 된 글꼴을 찾을 수 있습니다. 여기에서 다음과 같은 로그에서 글꼴을 찾았습니다.

2018-05-07 10:57:04.194127-0700 MyApp[84024:1486266] Verlag
2018-05-07 10:57:04.194266-0700 MyApp[84024:1486266]  Verlag-Book
2018-05-07 10:57:04.194401-0700 MyApp[84024:1486266]  Verlag-BlackItalic
2018-05-07 10:57:04.194516-0700 MyApp[84024:1486266]  Verlag-BoldItalic
2018-05-07 10:57:04.194616-0700 MyApp[84024:1486266]  Verlag-XLight
2018-05-07 10:57:04.194737-0700 MyApp[84024:1486266]  Verlag-Bold
2018-05-07 10:57:04.194833-0700 MyApp[84024:1486266]  Verlag-Black
2018-05-07 10:57:04.194942-0700 MyApp[84024:1486266]  Verlag-XLightItalic
2018-05-07 10:57:04.195170-0700 MyApp[84024:1486266]  Verlag-LightItalic
2018-05-07 10:57:04.195327-0700 MyApp[84024:1486266]  Verlag-BookItalic
2018-05-07 10:57:04.195510-0700 MyApp[84024:1486266]  Verlag-Light

이제 우리는 그것이 Verlag패밀리를 로드했고 그 패밀리 내의 글꼴 이라는 것을 알고 있습니다.

  • Verlag-Book
  • Verlag-BlackItalic
  • Verlag-BoldItalic
  • Verlag-XLight
  • Verlag-Bold
  • Verlag-Black
  • Verlag-XLightItalic
  • Verlag-LightItalic
  • Verlag-BookItalic
  • Verlag-Light

이제 React Native 앱에서 사용할 수있는 글꼴 패밀리에서 사용할 수있는 대소 문자 구분 이름입니다.

이제 기본 글꼴을 설정했습니다.

그런 다음 AppDelegate.m이 줄 에 글꼴 패밀리 이름을 추가 할 기본 글꼴을 설정하려면

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions
{

 ....
    // ADD THIS LINE (replace "Verlag" with your font)

  [[UILabel appearance] setFont:[UIFont fontWithName:@"Verlag" size:17.0]];
  ....
}

끝난.