React Native에서 다국어 응용 프로그램 만들기

언어는 줄곧 어떤 업무의 중요한 구성 부분이다.업무가 증가함에 따라 업무는 서로 다른 국가와 지역에서의 확장이 매우 중요하다.이 지역에서 성공하기 위해서는 현지화가 매우 중요하다.
모바일 앱이라고 해도 상황은 다르지 않다.응용 프로그램 사용자가 서로 다른 국가로 확장됨에 따라 사용자에게 모국어로 응용 프로그램을 사용하는 능력을 제공하는 것이 매우 중요하다.
본고에서, 우리는 react-native-localize 패키지를 사용하여 다중 언어를 지원하는 React 본체 응용 프로그램을 구축할 것이다.

선결 조건

이 강좌는 React Native에 대한 기본 지식을 필요로 합니다.개발 기계를 설치하려면 공식 지침here을 따르십시오.
우리가 같은 페이지에 있는지 확인하기 위해 다음은 본 강좌에서 사용한 버전-

노드 v10.15.0

npm 6.4.1

실 1.16.0

반응 천연 0.59.9

react native localize 1.1.3

i18n js 3.3.0

입문

영어, 프랑스어, 아랍어를 지원하는 React 로컬 응용 프로그램을 개발할 것입니다.

If you want to have a look at the source code right away, here is the Github link.

react-native-cli를 사용하여 새 항목을 만들려면 터미널에 다음을 입력합니다.

$ react-native init multiLanguage

$ cd multiLanguage

원하는 라이브러리 추가

다음을 입력하여 설치react-native-localize합니다.

$ yarn add react-native-localize

다음 링크를 사용합니다.

$ react-native link react-native-localize

If you face any error during installation, check the installation instructions here.

react-native-localize 라이브러리는 현지화와 관련된 많은 장치 상수에 접근할 수 있지만 i18n 라이브러리가 없습니다.
우리는 I18n.js 를 사용하여 JavaScript에서 I18n 번역을 제공합니다.

$ yarn add i18n-js

i18n-js 캐시/메모리가 제공되지 않은 것 같아서 lodash.memoize 를 사용하여 같은 작업을 할 것입니다.

$ yarn add lodash.memoize

번역 추가

translations에 디렉터리를 만들고 각 언어에 대한 JSON 파일을 세 개 만듭니다. 아래와 같습니다.

src영어

en.json 프랑스어

fr.json 아랍어

이러한 파일에는 키와 값이 있는 JSON 객체가 됩니다.
모든 언어의 키는 같고, 프로그램은 이 키를 사용하여 텍스트를 표시합니다.
이 값은 우리가 사용자에게 표시하고자 하는 실제 번역이며, 모든 언어에 대해 다를 것이다.
영어:

{
  "hello": "Hello World!"
}

프랑스어:

{
  "hello": "Salut le Monde!"
}

아랍어:

{
  "hello": "أهلاً بالعالم"
}

이와 유사하게, 프로그램에서 사용하는 모든 텍스트에 더 많은 키 값을 추가할 수 있습니다.

마스터 코드 추가

ar.json 파일을 열고 다음 내용을 가져옵니다.

import React from "react";
import * as RNLocalize from "react-native-localize";
import i18n from "i18n-js";
import memoize from "lodash.memoize"; // Use for caching/memoize for better performance

import {
  I18nManager,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View
} from "react-native";

이후, 우리는 보조 함수와 상량을 추가할 것이며, 잠시 후에 그것들을 사용할 것이다.

const translationGetters = {
  // lazy requires (metro bundler does not support symlinks)
  ar: () => require("./src/translations/ar.json"),
  en: () => require("./src/translations/en.json"),
  fr: () => require("./src/translations/fr.json")
};

const translate = memoize(
  (key, config) => i18n.t(key, config),
  (key, config) => (config ? key + JSON.stringify(config) : key)
);

const setI18nConfig = () => {
  // fallback if no available language fits
  const fallback = { languageTag: "en", isRTL: false };

  const { languageTag, isRTL } =
    RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
    fallback;

  // clear translation cache
  translate.cache.clear();
  // update layout direction
  I18nManager.forceRTL(isRTL);
  // set i18n-js config
  i18n.translations = { [languageTag]: translationGetters[languageTag]() };
  i18n.locale = languageTag;
};

이제 클래스 구성 요소를 만듭니다.

export default class App extends React.Component {
  constructor(props) {
    super(props);
    setI18nConfig(); // set initial config
  }

  componentDidMount() {
    RNLocalize.addEventListener("change", this.handleLocalizationChange);
  }

  componentWillUnmount() {
    RNLocalize.removeEventListener("change", this.handleLocalizationChange);
  }

  handleLocalizationChange = () => {
    setI18nConfig();
    this.forceUpdate();
  };

  render() {
    return (
      <SafeAreaView style={styles.safeArea}>
        <Text style={styles.value}>{translate("hello")}</Text>
      </SafeAreaView>
    );
  }
}

const styles = StyleSheet.create({
  safeArea: {
    backgroundColor: "white",
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  value: {
    fontSize: 18
  }
});

우리의 구조 함수 방법에서, 우리는 App.js 을 호출했는데, 이것은 초기 설정을 설정할 것이다.
그리고 App 에서 이벤트 탐지기를 추가합니다. 이벤트 탐지기는 모든 변경 사항을 탐지하고, 변경이 발생하면 setI18nConfig() 호출합니다.componentDidMount() 방법은 두 가지 일을 한다. 하나는 자극handleLocalizationChange()과handleLocalizationChange()이다.이것은 구성 요소를 다시 보여야 변경 사항을 볼 수 있기 때문에 안드로이드 장치에 필요한 것이다.
우리는 setI18nConfig() 생명주기 방법에서 탐지기를 삭제할 것이다.
마지막으로 forceUpdate() 에서 우리는 componentWillUnmount() 인쇄 render() 를 사용하고 우리의 hello 를 매개 변수로 전달할 것이다.그러면 언어와 표시할 텍스트가 자동으로 계산됩니다.

응용 프로그램 실행

번역이 효과가 있는지 없는지 볼 때가 되었다.
아날로그나 emulator에서 응용 프로그램을 실행하려면 다음을 입력하십시오.

$ react-native run-ios

$ react-native run-android

그래야 한다.

이제 장치 언어 설정을 프랑스어로 변경한 다음 응용 프로그램을 다시 엽니다.

마찬가지로 언어 설정을 아랍어로 변경하고 아랍어에서 Hello를 볼 수 있습니다.
지금까지는 좋았어요.
그러나 만약 내가 랜덤 언어를 선택했는데 이 언어의 번역이 응용 프로그램에 추가되지 않았다면 무슨 일이 일어났을까?그것은 어떤 언어로 회귀합니까?translate()의 목표는 사용할 수 있는 최상의 번역을 되돌리는 것이다.따라서 언어 선호 설정을 보고 예비 언어를 확인합니다.
iOS 시뮬레이터에서 언어와 지역 설정에 들어가면 언어의 우선순위를 볼 수 있습니다.

선택한 언어가 기본 설정 언어가 아닌 경우key, 사용자의 기본 설정 언어가 없기 때문에 반환findBestAvailableLanguage됩니다.

퇴로 보너스

findBestAvailableLanguage API를 사용하여 로컬화된 관련 장치 상수에 대한 일괄 액세스를 제공합니다. 에 제공된 전체 API를 반드시 확인하십시오.

문서 결론

다중 언어 지원을 추가하는 것은 이렇게 간단하다.현재reactnativelocalize를 사용하여 응용 프로그램에서 다양한 언어 지원을 쉽게 제공할 수 있습니다. 이것은 사용자의 응용 프로그램 사용률을 향상시키는 데 도움이 됩니다.
Github repo 에서 소스 코드를 찾습니다.

Originally published on Medium

만약 당신이 이 글을 좋아한다면, 당신의 사랑과 나눔을 계속 표현하세요.