React-Native 글로벌 다국어 전환 도구 라이브러리에 대한 자세한 설명 React-native-i18n

이 글은 주로 React-Native 전역 언어 전환 도구 라이브러리인 React-Native-i18n에 대한 자세한 설명을 소개하는 글입니다. 편집자가 꽤 좋다고 생각해서 지금 공유하고 참고용으로 올려드리겠습니다. 편집자를 따라 살펴보겠습니다. 모두에게 도움이 되기를 바랍니다.

속성	설명
RN 버전 지원	모든 버전
지원 플랫폼	iOS+Android
기본 여부 모듈이 필요해요	네
그렇죠 휴대용인가요?	예
jni 모듈 포함 여부	아니요

사용:

1.install(생략, 모두 git으로 작성, npm만 사용)

2. 프로젝트에서

정적 속성 참조이므로 redux를 사용하여 저장 및 교체하거나 직접 마실 수 있습니다(이 기사에서는 en 및 zh를 예로 사용합니다).

먼저 구성 파일의 영어 버전 en/index.js

export default {
 home: {
  greeting: 'Greeting in en',
  tab_home: 'Home',
  tab_donate: 'Donate',
  tab_demo: 'Demo',
  language: 'language',
  live_demo: 'Live Demo',
  buy_me_coffee: 'Buy me a coffee',
  gitee: 'Gitee',
  star_me: 'Star me',
  donate: 'donate',
  exit: 'exit?',
 },
 donate: {
  donate: 'donate us~~~',
  donate_desc: '© 2017 Pactera Technology International Limited. All rights reserved.',
 },
 demo: {
  dialog: 'dialog',
  button: 'button',
  switch: 'switch',
  action_sheet: 'Action Sheet',
 }
};

을 빌드한 다음 중국어 zh/index.js

export default {
 home: {
  greeting: 'Greeting in zh',
  tab_home: '首页',
  tab_donate: '捐赠',
  tab_demo: '例子',
  language: '语言',
  live_demo: '例子',
  buy_me_coffee: '请我一杯coffee',
  gitee: 'Gitee',
  star_me: '关注我',
  donate: '贡献',
  exit: '是否退出?',
 },
 donate: {
  donate: '支持我们～~',
  donate_desc: '© 2017 Pactera Technology International Limited. All rights reserved.',
 },
 demo: {
  dialog: '提示框',
  button: '按钮',
  switch: '开关',
  action_sheet: '',
 }
};

속성 이름, 구조는 동일하지만 속성은 동일합니다. 물론 여기서는 두 개의 정적 파일입니다. 시나리오에서 서버가 json을 보낼 수 있어야 하는 경우 이 부분은 비즈니스 요구 사항에 따라 다릅니다.

2.1 기본 언어 환경

위에서 2가지 언어 구성을 작성했는데 어떤 것이 초기화에 사용됩니까? 비즈니스 레이어를 호출하기 전에 몇 가지 사전 설정을 만들 수 있습니다(

i18n/index.js

import i18n from 'react-native-i18n';
import en from './en';
import zh from './zh';

i18n.defaultLocale = 'en';
i18n.fallbacks = true;
i18n.translations = {
 en,
 zh,
};

export {i18n};

). 기본 컨텍스트는 en이고 대체 상태는 허용됩니다(true인 경우 순서는 하향 순회 변환입니다). , 기본적으로 en과 zh라는 2개의 파일만 변환됩니다. 필요에 따라 나중에 추가할 수도 있습니다.

2.2 비즈니스 계층 호출

먼저 '기본 인덱스 디렉터리'에서 패키지

import {i18n}를 역전시킵니다.

call(Toast를 예로 사용)

 ToastAndroid.show(i18n.t('home.exit'),ToastAndroid.SHORT);

두 가지 출력 결과 다음과 같습니다:

소스 코드 분석

이 라이브러리의 구현은 두 부분으로 나뉘며, 한 부분은 기본 버전 판단 및 기타 기능과 js 부분 fnando/i18n의 핵심 구현입니다. -js

i18n-js는 다양한 형식과 콘텐츠의 변환, 언어 콘텐츠의 전환을 지원하는 경량 js 번역 라이브러리입니다. 주소는 다음과 같습니다: https://github.com/fnando/i18n-js

그럼 번역 변환 부분은 I18n입니다.js가 하는데, Native는 무엇을 하나요? 알아봅시다(안드로이드를 예로 들면 애플은 이해를 못해요, 미안해요)

네이티브 코드에는 클래스가 2개밖에 없어서 앞에서도 네이티브 코드를 직접 복사하면 된다고 했는데 프로젝트는 I18n에 따라 달라집니다. .js. 이 효과

RNI18nPackage는 일반 패키지 클래스입니다. 해당 기능은 기본 애플리케이션의 getPackages() 메서드 목록에 모듈을 추가한 다음 함께 패키지에 넣는 것입니다.

특정 기능은 모두 RNI18nModule에 있습니다

public class RNI18nModule extends ReactContextBaseJavaModule {

 public RNI18nModule(ReactApplicationContext reactContext) {
 super(reactContext);
 }
 //RN调用的控件名
 @Override
 public String getName() {
 return "RNI18n";
 }

 //对取出的Locale列表进行格式化的方法
 private String toLanguageTag(Locale locale) {
 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.LOLLIPOP) {
  return locale.toLanguageTag();
 }

 StringBuilder builder = new StringBuilder();
 builder.append(locale.getLanguage());

 if (locale.getCountry() != null) {
  builder.append("-");
  builder.append(locale.getCountry());
 }

 return builder.toString();
 }

 private WritableArray getLocaleList() {
 WritableArray array = Arguments.createArray();

 if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.N) {
  //获取区域设置列表。这是获取区域的首选方法。
  LocaleList locales = getReactApplicationContext()
   .getResources().getConfiguration().getLocales();

  for (int i = 0; i < locales.size(); i++) {
  array.pushString(this.toLanguageTag(locales.get(i)));
  }
 } else {
  array.pushString(this.toLanguageTag(getReactApplicationContext()
   .getResources().getConfiguration().locale));
 }

 return array;
 }

 //js端可获取属性的列表
 @Override
 public Map<String, Object> getConstants() {
 HashMap<String, Object> constants = new HashMap<String,Object>();
 constants.put("languages", this.getLocaleList());
 return constants;
 }

 //提供给js端调用的方法，用来获取默认的语言环境，回调方式用的是promise
 @ReactMethod
 public void getLanguages(Promise promise) {
 try {
  promise.resolve(this.getLocaleList());
 } catch (Exception e) {
  promise.reject(e);
 }
 }
}

토스트를 추가하여 로케일에서 어떤 일이 일어나는지 확인하세요

코드 복사 코드는 다음과 같습니다.

Toast.makeText(getReactApplicationContext(), "locales.get(i ) "+locales.get(i),Toast.LENGTH_LONG).show();

효과는 다음과 같습니다.

내부 구현을 알아보고 싶었으나, 비공개 클래스로 밝혀졌습니다

요약:

먼저 Native는 이 휴대폰의 LocaleList를 가져온 다음 첫 번째 요소의 형식을 지정하고 처리를 위해 I18n.js로 보냅니다. js는 키를 기반으로 효과적인 언어 규칙 집합을 선택하고 프로세스는 다음과 같습니다. 사용 순서는 동일합니다.
전체 라이브러리의 통합도가 상대적으로 낮고, 사용 시 큰 문제가 없으며, redux와 결합하면 더 맛있습니다.

관련 권장 사항:

다국어 예제의 React-intl 구현 자세한 설명

PHP - 자동 다국어 전환 구현

PHP - 자동 다국어 전환 구현

위 내용은 React-Native 글로벌 다국어 전환 도구 라이브러리에 대한 자세한 설명 React-native-i18n의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!