React Native에서 다국어 애플리케이션 작성

새로운 국가와 지역을 개척하는 국제 기업에게 제품 현지화는 매우 중요합니다. 마찬가지로 모바일 애플리케이션에도 현지화가 필요합니다. 개발자가 해외 확장을 시작하는 경우 다른 국가의 사용자에게 모국어로 인터페이스를 사용할 수 있는 기회를 제공하는 것이 중요합니다. 이 기사에서는 패키지를 사용하여 React Native 애플리케이션을 작성합니다. 반응 네이티브 현지화.

Skillbox는 다음을 권장합니다. 교육용 온라인 과정 "직업 자바 개발자".
알림: "Habr"의 모든 독자를 위한 - "Habr" 프로모션 코드를 사용하여 Skillbox 과정에 등록할 때 10 루블 할인.

도구 및 기술

이 글을 이해하려면 React Native 작업에 대한 기본 기술이 필요합니다. 작업 기계의 설정에 익숙해지려면 다음을 수행하십시오. 공식 지침을 사용하십시오.

다음 버전의 소프트웨어 도구가 필요합니다.

• 노드 v10.15.0
• npm 6.4.1
• 털실 1.16.0
• 반응 네이티브 0.59.9
• 반응 네이티브 현지화 1.1.3
• i18n-js 3.3.0

Начинаем

영어, 프랑스어, 아랍어를 지원하는 애플리케이션을 만들겠습니다. 먼저 React-native-cli를 사용하여 새 프로젝트를 생성합니다. 이렇게 하려면 터미널에 다음을 입력해야 합니다.

$ 반응 네이티브 초기화 다국어
$ cd 다국어

필요한 라이브러리 추가

첫 번째 단계는 다음을 입력하여 React-native-localize를 설치하는 것입니다.
$ 원사 반응 네이티브 현지화 추가

설치 과정에서 문제가 발생할 경우, 설치 매뉴얼을 읽어 볼 가치가 있습니다.

React-native-localize 라이브러리는 개발자에게 다국어 기능에 대한 액세스를 제공합니다. 하지만 그녀에게는 i18n이라는 라이브러리가 하나 더 필요합니다.

이 문서에서는 사용법을 설명합니다. I18n.js JavaScript로 번역을 제공하기 위해.

$ 원사 i18n-js 추가

i18n-js는 캐싱이나 메모 기능을 제공하지 않으므로 이를 위해 lodash.memoize를 사용하는 것이 좋습니다.

$ 원사 lodash.memoize 추가

번역 작업

애플리케이션이 다른 언어와 작동할 수 있으려면 먼저 src 내에 번역 디렉터리를 만든 다음 각 언어에 대한 세 개의 JSON 파일을 만들어야 합니다.

1. 영어의 경우 en.json;

2. 프랑스어의 경우 fr.json;

3. 아랍어의 경우 ar.json.

이러한 파일에는 키와 값이 포함된 JSON 개체가 포함되어 있습니다. 키는 각 언어마다 동일합니다. 이는 응용 프로그램에서 텍스트 정보를 표시하는 데 사용됩니다.

값은 사용자에게 표시되어야 하는 텍스트입니다.

영어:

{"안녕하세요": "안녕하세요!"}

Французский

{"안녕하세요": "Salut le Monde!"}

Арабский

{ "안녕하세요": "اهلاً بالعالم"}

같은 방법으로 다른 언어도 추가할 수 있습니다.

메인코드

이 시점에서 App.js 파일을 열고 여기에 가져오기를 추가해야 합니다.

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

이제 App 클래스의 구성 요소를 만들어 보겠습니다.

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
  }
});

첫 번째 요소인 setI18nConfig()는 초기 구성을 설정합니다.

그런 다음, componentDidMount()에 이벤트 리스너를 추가해야 합니다. 이 요소는 업데이트를 수신하고 업데이트가 발생하면 handlerLocalizationChange()를 호출합니다.

handlerLocalizationChange() 메서드는 setI18nConfig() 및 forceUpdate()를 활성화합니다. 변경 사항을 눈에 띄게 하려면 구성 요소를 렌더링해야 하므로 Android 장치에 필요합니다.

그런 다음 componentWillUnmount() 메서드에서 청취를 제거해야 합니다.

마지막으로 render()는 번역()을 사용하고 여기에 주요 매개변수를 추가하여 hello를 반환합니다. 이 단계를 마치면 애플리케이션은 어떤 언어가 필요한지 "이해"하고 그 안에 메시지를 표시할 수 있습니다.

애플리케이션 출시

이제 번역이 어떻게 진행되는지 확인할 시간입니다.

먼저 시뮬레이터나 에뮬레이터에서 다음을 입력하여 애플리케이션을 시작합니다.

$ 반응 네이티브 실행 iOS
$ 반응 네이티브 실행 안드로이드

다음과 같이 보일 것입니다:

이제 애플리케이션을 실행하여 언어를 프랑스어로 변경할 수 있습니다.

우리는 아랍어에도 똑같은 일을 합니다. 차이는 없습니다.

여태까지는 그런대로 잘됐다.

하지만 애플리케이션에 번역이 없는 언어를 무작위로 선택하면 어떻게 될까요?

findBestLanguage의 임무는 사용 가능한 모든 번역 중에서 최적의 번역을 제공하는 것입니다. 결과적으로 기본 언어가 표시됩니다.

우리는 전화 설정에 대해 이야기하고 있습니다. 예를 들어 iOS 에뮬레이터에서는 언어 순서를 볼 수 있습니다.

선택한 언어가 기본 언어가 아닌 경우 findBestAvailableLanguage는 기본 언어가 표시되도록 정의되지 않은 값을 반환합니다.

보너스

React-native-localize에는 수많은 언어 요소에 대한 액세스를 제공하는 API가 있습니다. 일을 시작하기 전, 문서를 확인해 볼 가치가 있습니다.

조사 결과

응용 프로그램은 문제없이 다국어로 만들 수 있습니다. React-native-localize는 앱의 사용자 기반을 확장할 수 있는 훌륭한 옵션입니다.

프로젝트 소스 코드 여기에.

Skillbox는 다음을 권장합니다.

• XNUMX년 실습 코스 "저는 PRO 웹 개발자입니다".
• 온라인 코스 "처음부터 C# 개발자".
• 실기 코스 "0에서 PRO로의 PHP 개발자".

출처 : habr.com