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

99

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

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

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

react-native 
— Dagobert Renouf
소스
1
이 질문에 대한 완벽한 답이 있습니까? ??? 나는 어떤 styles.text 또는 그와 같은 것을 부르고 싶지 않습니다.
— MD Ashik

답변:

70

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

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

— 데이비드 E. 첸
소스
2
내가 필요했던 바로 그게 감사합니다. 나는 아직 충분히 깊게 구성 요소 접근 방식을 파악하지 않았다처럼 :) 보인다
— Dagobert Renouf
2
문서에서 명확하지 않은 한 가지는 구성 요소의 속성을 전달하고 구성 요소의 스타일을 존중하는 방법입니다. :이 같은 할 수 gist.github.com/neilsarkar/c9b5fc7e67bbbe4c407eec17deb7311e
— 닐 사카
1
@NeilSarkar 그 요점 예제의 한 가지 문제는 스타일이 생성자에서 생성된다는 것입니다. 결과적으로 스타일 소품이 변경되면 다시 렌더링하기를 원하지만이 경우에는 그렇지 않습니다. render()생성자 대신 에서 처리되어야합니다 . useMemo효율성이 중요한 경우 후크를 사용하는 것도 도움 이 될 수 있습니다. 또는 생성자에 유지하려는 경우 스타일 소품 변경으로 인해 구성 요소 componentDidUpdate가 업데이트 this.style될 때 업데이트 되는 논리 를 추가하는 것이 중요합니다 .
— Fernando Rojo
좋은 지적, 감사합니다! 누군가가 (순수한 구성 요소의 경우) 렌더링 방법의 스타일을 결합하는 요점에 리팩토링 된 버전을 추가 한 것 같습니다.
— Neil Sarkar
59

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

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 가 있습니다 .

— Ajackster
소스
구성 요소 구성을 사용하는 관용적 방법이 더 나은 선택처럼 보이지만 이것은 멋진 해킹입니다.
— Daniel Little
텍스트 구성 요소가 기본 글꼴 변경을 지원하지 않는 경우이 솔루션이 훨씬 더 좋아집니다. 진정한 네이티브 앱이 제공하는 모든 세부 사항에 대해 래퍼 구성 요소를 만드는 것보다 한곳에 전역 컨트롤을 추가하고 네이티브 구성 요소를 사용하는 것이 훨씬 낫습니다.
— mienaikoe
나는 위의 두 가지 솔루션 사이에서 망설 였고 실제로 비공식 플러그인을 설치하는 것이 싫다. 감사!
— Zhang Buzz
그래서 전화해야하나요 <Text style={styles.text}>? body {font-family: 'Open Sans';} 업데이트 솔루션이있는 것과 같은 완벽한 솔루션이 아닙니다 . ??
— MD Ashik
1
당신은 할 필요가 없습니다 Text style={styles.text}>. 응용 프로그램의 어딘가에 사용자 지정 소품을 선언하면 모든 텍스트 구성 요소에 적용됩니다. 그것은 매우 유사body {font-family: ....}
— Ajackster
32

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

Text.defaultProps = Text.defaultProps || {}

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

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

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

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

— AJA
소스
4
defaultProps다른 모든 답변이 작성되었을 때 존재하지 않았을 수도 있지만 지금은 이것이 가능한 것 같습니다.
— freeall
4
불행하게도,이 작업을 우리가 무시하지 않을 경우 style소품을 말하자면, 특정의 스타일을 조정할 수 있습니다 Text구성 요소
— Amerzilla
사실이지만이 문제를 해결할 수 있습니다. 공통 스타일을 개체로 만들고 사용자 지정 글꼴을 원하는 경우 해당 개체를 포함하는 배열을 구성 요소에 전달하면됩니다. + yourNewStyleObject @Amerzilla
— AJA
1
거기에 문제가 있습니다. 누군가 style가 Text 구성 요소에서 prop 을 정의하면 기본 글꼴이 대체됩니다.
— Broda Noel 2018
3
2019 년이고 완벽하게 작동하고 있습니다. Android에서는 파일 이름에 "-"를 사용할 수 없습니다. font_name.ttf와 같은 글꼴 파일 이름을 정의하십시오.
— MRSafari
24

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]
    });
};
— 플로리스 M
소스
4
훌륭한 솔루션이지만 변경해야합니다 : [origin.props.style, {color : 'red', fontFamily : 'Arial'}]-> [{color : 'red', fontFamily : 'Arial'}, origin. props.style] 그렇지 않으면 구성 요소에 살고 있고 사용자 지정 스타일보다 우선합니다
— Iaconis 시몬
1
최선을 다했습니다. Text.prototype.render는 더 이상 작동하지 않고 Text.render는 작동합니다!
— Kira
1
동일한 아이콘을 상속하지 않는 방법은 무엇입니까?
— mob
1
나는의 font를 설정하고 재정의 사용자 지정 스타일에 확실하지 않은 것으로 @IaconisSimone 최상의 접근 방식에 동의
— dczii
1
이것이가는 길이다
— Witalo Benicio
14

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>
...
— 순경
소스
@FancyJohn 이제 후크와 useRef. reactjs.org/docs/hooks-reference.html#useref
— Christopher Reid
11

이 함수를 루트 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;
            }
        };
    }
}
— Rob
소스
이것은 정확히 내가 찾던 것이고 더 이상 설치하고 싶지 않은 것입니다.
— zevy_boy
내 App.js가 주로 구성되어 const App = StackNavigator({...})있고 export default App여기서 생성자를 사용할 수 없다고 생각하므로 정확히 어디에이 코드를 배치할까요?
— kojow7
여기에 내 자신의 질문을 추가했습니다 : stackoverflow.com/questions/50081042/…
— kojow7
componentDidMount보다 생성자가 필요한 이유는 무엇입니까?
— Dror Bar
2

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

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]];
  ....
}

끝난.

— Garrettmac
소스
가장 좋은 방법은 RN 0.57의 업데이트와 관련된 것이지만 작동하지 않습니다.
— user2976753
1

나를 위해 작동합니다 : React Native에 사용자 정의 글꼴 추가

글꼴을 다운로드하여 assets / fonts 폴더에 배치하고 package.json에이 줄을 추가하십시오. 

 "rnpm": {
"assets": ["assets/fonts/Sarpanch"]}

그런 다음 터미널을 열고 다음 명령을 실행하십시오. react-native link

이제 당신은 갈 수 있습니다. 더 자세한 단계. 위에 언급 된 링크를 방문하십시오

— Khushboo Tahir
소스
1

더하다

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

에서 package.json 다음 실행react-native link

— 산집 수나
소스
1

package.json에 설정

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

그리고 반응 네이티브 링크 연결

— 아민 모하마디
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.