React-Native 글로벌 화 다 중 언어 전환 도구 라 이브 러 리 react-native-i18n

오 프 닝 C 단계 깨 달 음
최근 2~3 개 월 동안 개인 적 인 일 로 체계 적 인 업무 와 공 부 를 하지 못 했 습 니 다.도중에 며칠 동안 Kotlin 의 물건 을 보고 demo 를 쓰 고 작은 프로젝트 를 만 들 었 습 니 다.그러나 전체적인 상태 가 좋 지 않 았 습 니 다.요 며칠 동안 95 야드 농민 들 의 강 세 를 보고 걱정 했 습 니 다.
지금 대부분 깨 어 난 지 정오 가 되 었 는데 일찍 일어나 헬 스 장 에 갔다 가 늦게 일어나 면 집에 서 하루 를 보낸다.회사 에 일이 있 거나 다른 집안일 이 있 으 면 조율/소통/처리 하 세 요.모든 사람 이 미리 양 로 상태 에 들 어간 것 같 습 니 다.(물론 이 솥 의 절반 은 왕 의 영광 에 빠 져 헤 어 나 올 수 없고 좋 지 않 습 니 다)
최근 프로젝트 는 거의 아무 일 도 없 었 습 니 다.그리고 부하 직원 들 에 게 예전 에 한 내용 을 두 번 포장 하 라 고 했 습 니 다.그리고 그들 은 제3자 국제 화 라 이브 러 리 를 인 용 했 습 니 다.저 는 괜 찮 은 것 같 습 니 다.그리고 소스 코드 를 보고 공유 하 겠 습 니 다.여러분 이 사용 하 시 기 를 바 랍 니 다.(현재 제품 의 시청자 들 은 모두 국내 것 이지 만 준비 하 는 것 이 괜 찮 은 것 같 습 니 다?)
잔소리 끝 났 습 니 다.
라 이브 러 리 속성 소개:
프로젝트 주소:https://github.com/ddwhan0123/Useful-Open-Source-Android
속성
해명 하 다.
RN 버 전 지원
모든 버 전
지원 플랫폼
iOS+Android
NativeModule 필요 여부
예.
이식 가능 여부
예.
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: '',
 }
};

속성 명,구 조 는 일치 하지만 속성 이 다 릅 니 다.물론 여 기 는 정적 인 2 개의 파일 입 니 다.만약 에 장면 이 필요 하 다 면 서버 에서 json 을 보 낼 수 있 습 니 다.그것 은 완전히 동태 적 인 것 입 니 다.이 부분 은 업무 수 요 를 볼 수 있 습 니 다.
2.1 기본 언어 환경
우 리 는 위 에 두 가지 언어 설정 을 썼 습 니 다.그러면 어떤 것 을 초기 화 했 습 니까?업무 층 이 호출 되 기 전에 우 리 는 먼저 미리 설정 할 수 있다.
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 입 니 다.fallbacks 상태(true 일 때 순서대로 아래로 옮 겨 다 니 며 번역 할 수 있 습 니 다)를 허용 합 니 다.미리 설정 한 파일 은 2 개,1 개 en 1 zh 입 니 다.이것 도 필요 에 따라 추가 할 수 있 습 니 다.
2.2 업무 계층 호출
먼저 하청 을 주다
import{i18n}from'미리 설정 한 index 디 렉 터 리';
호출(Toast 를 예 로 들 면)

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

두 가지 출력 결 과 는 다음 과 같다.


소스 코드 분석
이 라 이브 러 리 의 실현 은 2 부분 으로 나 뉘 는데 일 부 는 Native 의 버 전 판단 등 기능 과 js 부분의 핵심 실현 fnando/i18n-js 이다.
i18n-js 는 경량급 js 번역 라 이브 러 리 입 니 다.그 는 각종 형식 과 내용 의 환산 과 언어 내용 의 전환 을 지원 합 니 다.주 소 는 다음 과 같 습 니 다https://github.com/AlexanderZaytsev/react-native-i18n
그럼 번역,변환.이 건 I18n.js 가 만 든 거 예요.그러면 네 이 티 브 는 뭐 했 어 요?끝까지 알 아 보 겠 습 니 다.

Native 코드 는 두 가지 종류 입 니 다.그래서 제 가 전에 Native 코드 copy 를 직접 가 져 간 다음 에 프로젝트 를 I18n.js 에 의존 해도 이 효 과 를 얻 을 수 있 습 니 다.
RNI18n Package 는 일반적인 Package 클래스 로 우리 의 module 를 주 응용 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 하나 더 해서 locale 에 뭐 가 나 오 는 지 볼 게 요.

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

효 과 는 다음 과 같 습 니 다:

내부 의 실현 여 부 를 알 아 보 려 했 으 나 결 과 는 비공개 류 였 다.

요약:
먼저 네 이 티 브 에 게 서 이 휴대 전화의 LocaleList 를 가 져 온 다음 에 첫 번 째 요 소 를 포맷 하여 I18n.js 에 맡 긴 다음 에 I18n.js 는 key 에 따라 효과 적 인 언어 규칙 을 선택 한 다음 에 절 차 는 사용 할 때의 순서 와 같 습 니 다.
전체 라 이브 러 리 의 집적 난이도 가 비교적 낮 고 사용 하기에 비교적 간편 하 며 사용 할 때 큰 구 덩이 를 만 나 지 못 했 기 때문에 redux 와 함께 사용 하면 더욱 맛있다.
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.