React Native에서 글꼴 사용자 정의 방법

소개

Rootstrap에서 나의 첫 번째 임무는 React 본기 응용 프로그램을 개발하는 것이다. 지도, 채팅과 관련되고 디자인 규범을 엄격히 따르는 것이다.이렇게 할 때 내가 먼저 시도한 일 중 하나는 응용 프로그램에서 사용하는 가족 글꼴을 설정하는 것이다. 나는 이것이 내가 예상한 것처럼 그렇게 쉽지 않다는 것을 발견했다.
가장 큰 문제는 모든 강좌가 실행된다고 말하는 것이다react-native link. 나의 경험에 따르면 이것은 나쁜 생각이다. 왜냐하면 나중에 응용 프로그램이 구축을 멈추었기 때문이다.이것은 React Native 0.60이 발표된 이래로 Autolinking이라는 속성이 링크 라이브러리의 방식을 바꾸었기 때문이다.

이 게시물 개요

이 강좌에서 링크 명령을 사용하지 않고 수동으로 글꼴을 추가하고 연결하는 방법을 배울 것입니다.
우선, 사용자 정의 글꼴을 사용하는 데 필요한 모든 설정을 볼 수 있고, 간단한 응용 프로그램에서 그 사용법을 이해할 수 있습니다.

프로비저닝

항목 만들기

우선,reactnative에서 프로젝트를 만들어야 합니다.이렇게 하려면 터미널을 열고 항목을 만들 폴더로 이동한 다음 다음을 수행합니다.

react-native init customize_fonts_react_native_tutorial

설치 라이브러리

프로젝트를 만든 후 라이브러리를 설치해야 합니다.

cd customize_fonts_react_native_tutorial
npm install --save react-native-global-props
npm install --save babel-plugin-module-resolver

글꼴 다운로드 및 이름 바꾸기

사용자 정의 글꼴에 대한 자습서이기 때문에, React Native 프로젝트에 추가할 글꼴을 다운로드해야 합니다.
사용자 정의 글꼴을 얻을 수 있는 곳이 많다.이 강좌에서 나는 두 가지 다른 글씨체 와GoodFeelingSans를 사용했다.이 두 가지 상황에서 나는 결국 하나를 얻었다.ttf 파일.
iOS에서 글꼴 파일 이름은 PostScript 이름과 같아야 합니다.PostScript 이름을 찾으려면 글꼴 매뉴얼을 사용하여 파일ttf을 열고 PostScript 이름을 보고 글꼴의 이름을 변경합니다.
Dan'sDisney

React Native의 구성

React 원본 프로젝트에서 사용자 정의 글꼴을 사용하려면 플랫폼마다 다른 설정이 필요하지만 모든 플랫폼이 필요로 하는 일반적인 설정도 있습니다.

전체적

이 두 가지 상황에서 프로젝트의 루트 디렉터리에 이 폴더를 만들어야 합니다: src/assets/fonts.fonts 폴더에 사용자 정의 글꼴을 추가해야 합니다.ttf 파일, 글꼴마다 하나씩.
이 밖에 babel을 수정합니다.구성js 이 코드 추가:

plugins: [
    [
      'module-resolver',
      {
        alias: {
          assets: './src/assets',
        },
      },
    ],
  ],

안드로이드

Android에서 이 폴더를 Android/app/src/main/:assets/fonts에 추가해야 합니다.fonts 폴더에 ttf 파일을 추가해야 합니다.

네트워크 간 네트워크 운영 체제

iOS에서는 구성이 더 복잡합니다.ios/폴더로 이동하여 열어야 합니다.
customize\u fonts\u react\u native\u 강좌.Xcode가 있는 xcodeproj 파일입니다.
그리고 customize\u fonts\u react\u native\u tutorial->Build Phases를 누르고 Copy Bundle Resources 부분을 찾아야 합니다.

글꼴을 더하기 기호로 추가한 다음 다른 것을 추가해야 합니다...src/assets/fonts 폴더에서 글꼴을 선택하고 완성하는 옵션입니다.

활용단어참조

마지막으로 이 모든 절차를 마치면 React Native 프로젝트에서 사용자 정의 글꼴을 사용할 수 있습니다.
예를 들어, 모든 설정이 정확한지 테스트하기 위해 매우 간단한 화면을 만들 수 있습니다.src 폴더 프로그램에 추가합니다.js와 스타일.js 파일.
응용 프로그램.js:

import React from 'react';
import {SafeAreaView, Text, TextInput} from 'react-native';
import {setCustomText, setCustomTextInput} from 'react-native-global-props';
import styles from './styles';

const App = () => {
  const customTextProps = {
    style: {
      fontFamily: 'GoodFeelingSans',
    },
  };

  setCustomText(customTextProps);
  setCustomTextInput(customTextProps);

  return (
    <SafeAreaView style={styles.container}>
      <Text style={styles.header}>How to Customize Fonts in React Native</Text>
      <Text style={styles.textDefaultFont}>
        This is the default font (GoodFeelingSans)
      </Text>
      <Text style={styles.textDifferentFont}>
        This is a different font (DansDisneyUI)
      </Text>
      <TextInput value="This input has default font" />
      <TextInput
        value="This input has a different font"
        style={styles.inputDifferentFont}
      />
    </SafeAreaView>
  );
};

export default App;

스타일js:

import {StyleSheet} from 'react-native';

const differentFont = "Dan'sDisneyUI";

const styles = StyleSheet.create({
  container: {
    alignItems: 'center',
    flex: 1,
    justifyContent: 'space-around',
  },

  header: {
    fontSize: 18,
    fontWeight: 'bold',
    margin: 15,
    textAlign: 'center',
  },

  inputDifferentFont: {
    fontFamily: differentFont,
  },

  textDefaultFont: {
    fontSize: 16,
    marginVertical: 15,
    textAlign: 'center',
  },

  textDifferentFont: {
    fontFamily: differentFont,
    fontSize: 16,
    marginVertical: 15,
    textAlign: 'center',
  },
});

export default styles;

색인을 동시에 수정합니다.js가 새로운/src/App 대체/응용 프로그램.
이 프로그램에서 사용자 정의 글꼴을 기본 글꼴로 설정하려면 react-native-global-props 라이브러리를 사용합니다.만약 당신이 그것을 필요로 하지 않는다면, 이것은 필요 없습니다. 원하는 텍스트에만 사용자 정의 글꼴을 설정할 수 있습니다.기본 사용자 정의 글꼴을 정의해도 이렇게 할 수 있습니다.또한 두 가지 다른 기본 설정이 있습니다. 하나는 텍스트 구성 요소이고, 다른 하나는 텍스트 입력에 사용됩니다.
현재 react-native run-ios 또는 react-native run-android 을 실행하면 사용자 정의 글꼴이 있는 텍스트를 볼 수 있습니다.

iOS "인식할 수 없는 글꼴 제품군" 오류

이 모든 절차를 마친 후에 식별할 수 없는 글꼴 계열의 오류가 매우 흔한 경우 일부 작업을 확인하거나 실행할 수 있습니다.
우선, 당신은 당신의 정보를 검사해야 합니다.plist 파일은ios/customize\ufonts\ureact\unative\ututorial 폴더에 있습니다.이 파일은 UIAppFonts 키를 포함하는 부분이 있어야 합니다. 이 부분은 글꼴을 포함하는 문자열 그룹을 포함합니다.부족한 경우 다음을 추가해야 합니다.

<key>UIAppFonts</key>
    <array>
        <string>GoodFeelingSans.ttf</string>
        <string>Dan'sDisneyUI.ttf</string>
    </array>

프로젝트에 여러 개의 구축 목표가 있다면, 이 변경 사항을 각자의 정보에 적용해야 합니다.plist 파일.
그 후에도 오류가 발생하면 다음 부분(또는 모두)을 시도해 보십시오.

에뮬레이터(또는 장치)에서 어플리케이션 제거

node_modules 폴더, 패키지 잠금을 삭제합니다.json 파일 및 npm 설치 실행

ios 폴더에서 Pods 폴더, Podfile을 삭제합니다.파일을 잠그고pod 설치를 실행합니다

npmstart-Reset cache 명령 실행

을 통해 캐시 재설정
이 모든 것을 완성한 후에 당신은 이제 새로운 사용자 정의 글꼴을 사용할 수 있기를 바랍니다.

총결산

이 강좌에서는 React Native에 사용자 정의 글꼴을 추가하고 링크하며 사용하는 방법을 배웠습니다.GitHub 프로젝트 를 찾을 수 있습니다.
원하는 경우 here 에서 이 글과 더 많은 글을 볼 수 있습니다.