React Native Apps의 다국어 지원 시스템 만들기

여러 언어를 지원하는 모바일 애플리케이션은 더 이상 선택이 아닙니다. 글로벌 채택을 목표로하는 모든 앱의 요구 사항입니다. React Native는 크로스 플랫폼 기능을 갖춘 여러 강력한 접근법을 제공하여 국제화(i18n) 및 현지화(l10n)을 구현할 수 있습니다. 이 문서는 React Native의 다국어 지원 시스템을 구축하는 심층적인 가이드를 제공하며, 라이브러리, 구성, 동적 전환, 복잡한 다중 규칙을 처리하는 복잡한 다중 언어 지원 시스템을 구축하는 데 중점을 두는 방법을 제공합니다.

현지화의 핵심 개념

로컬라이제이션은 간단한 텍스트 번역을 넘어갑니다. 그것은 형식화 번호, 날짜, 통화, 텍스트 방향 처리 (LTR vs. RTL), 복수화, 성별 형태, 심지어 번역 문자열에 맞게 UI 레이아웃을 조정합니다. 잘 설계 된 i18n 시스템은 코드를 기반으로 번역 가능한 콘텐츠를 분리하고, 키 기반 참조를 사용하고, 앱 재시작없이 실행 가능한 언어 전환을 지원합니다.

React Native의 핵심 과제

  • 장치 로컬 탐지를 위한 Native 모듈 (iOS와 Android 간의 반대).
  • 효율적으로 로딩 및 캐싱 번역 파일.
  • 전체 앱에서 활동하는 언어 관리 (Blockchain 및 Persisted preferences 포함).
  • RTL 레이아웃 처리-정치 Native 지원 하지만 주의적인 정렬이 필요합니다.
  • 모든 번역 문자열을 테스트하고 검증합니다.

오른쪽 i18n 도서관 선택

여러 라이브러리가 존재하는 동안, react-i18next]는 React Native의 가장 인기 있고 기능이 뛰어난 선택입니다. i18next의 상단에 내장되어, Hooks, HOCs 및 컴포넌트를 제공합니다. 대안에는 i18n-js (imple, ]] ]] n-js[[[FLT:]]]]] [FLT:]]]]] next]]]]]]]]]]]] ]]] [FLT:[FLT:nextnext[FLT:[FLT:next[FLT:[[FLT:[FLT:]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]

핵심 라이브러리 설치

필수 패키지를 설치해서 시작:

npm install react-i18next i18next i18next-http-backend react-native-localize

선택적으로 i18next-browser-languagedetector]를 추가하여 기기의 선호에 따라 자동 언어 검출을 위한 자동 탐지를 위한 자동 연결. react-native-localize(Auto-linking in RN 0.60+)를 위한 기본 모듈을 연결해야 할 수도 있습니다.

i18n 인스턴스 설정

구성 파일 생성, 예를들면, :

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import * as RNLocalize from 'react-native-localize';
import en from './translations/en.json';
import es from './translations/es.json';
import fr from './translations/fr.json';

const resources = { en: { translation: en }, es: { translation: es }, fr: { translation: fr } };

const detectionOptions = {
 order: ['localStorage', 'navigator'],
 caches: ['localStorage'],
};

i18n
 .use(initReactI18next)
 .use(require('i18next-browser-languagedetector').default) // for RN, you may replace with custom detector
 .init({
 resources,
 fallbackLng: 'en',
 interpolation: { escapeValue: false },
 detection: {
 // For RN, we'll override detection manually (see below)
 },
 });

// Detect device language at startup
const detectLanguage = () => {
 const locales = RNLocalize.getLocales();
 if (locales && locales.length > 0) {
 const langCode = locales[0].languageCode;
 const supportedLanguages = Object.keys(resources);
 const lang = supportedLanguages.includes(langCode) ? langCode : i18n.options.fallbackLng[0];
 i18n.changeLanguage(lang);
 }
};
detectLanguage();

// Listen to app focus for locale changes
export default i18n;

react-native-localize 은 앱이 디바이스의 지역 설정을 존중합니다. 함수는 한 번 실행되며 초기 언어 설정이 가능합니다. 지속적인 업데이트(사용자가 장치 언어를 변경하는 경우 앱이 열리면, 변경을 구독할 수 있습니다.

번역 파일 구조

언어 및 네임스페이스로 배열된 JSON 파일에 번역을 구성합니다. 의 예:

{
 "common": {
 "welcome": "Welcome",
 "greeting": "Hello, {{name}}!"
 },
 "home": {
 "title": "Home Screen",
 "description": "This is a multi-language React Native app."
 },
 "errors": {
 "network": "Network error. Please try again."
 }
}

namespaces (예: ], ]])는 대형 앱을 관리하고 번역 펑크의 게으른 로딩을 가능하게 합니다.

구성에 대한 번역 사용

useTranslation 걸이

어떤 기능적인 성분에서:

import { useTranslation } from 'react-i18next';

const MyComponent = () => {
 const { t, i18n } = useTranslation('common');
 return (
 
 {t('welcome')}
 {t('greeting', { name: 'John' })}
  i18n.changeLanguage('es')}>
 Switch to Spanish
 
 
 );
};

t 함수는 변수를 곱하고 복수를 처리한다. 언어 변경하려면 ]]를 호출한다. 이 모든 가입 구성 요소의 렌더링을 트리거한다.

Trans 구성품 사용

내장된 Markup 또는 React 구성 요소와 복잡한 문자열을 위해:

import { Trans } from 'react-i18next';
// In translations: "welcome_html": "Welcome, {user}!"

 Welcome, {user}!

, 성별, 및 텍스트 처리

i18next는 상자에서 고급 복수 규칙을 지원합니다. ] suffix 또는 context를 사용하여 키를 정의하십시오. 예 :

{
 "item": "{{count}} item",
 "item_plural": "{{count}} items",
 "item_other": "{{count}} items"
}

사용법: 자동적으로 Locale에 근거를 둔 정확한 모양을 선정합니다. 성 및 다른 상황은 ] 선택권을 통해 취급될 수 있습니다.

동적 언어 전환 및 지속

사용자의 언어 선호도를 인식하려면, AsyncStorage(또는 ]react-native-mmkv])에서 선택한 언어를 저장하고 앱 시작에 로드합니다. i18n 구성을 수정하십시오:

import AsyncStorage from '@react-native-async-storage/async-storage';

const languageDetector = {
 type: 'languageDetector',
 async: true,
 detect: async (callback) => {
 const storedLang = await AsyncStorage.getItem('user-language');
 callback(storedLang || 'en');
 },
 init: () => {},
 cacheUserLanguage: async (lng) => {
 await AsyncStorage.setItem('user-language', lng);
 },
};

i18n.use(initReactI18next).use(languageDetector).init({
 fallbackLng: 'en',
 resources,
 interpolation: { escapeValue: false },
});

이제 사용자 스위치 언어가 저장되고 다음 실행에 자동으로 복원됩니다.

오른쪽-왼쪽 (RTL) 지원

React Native는 RTL을 통해 지원한다. 모듈. 언어가 아랍어, 히브리어, 또는 페르시아어, 힘 RTL:

import { I18nManager } from 'react-native';

const changeLanguage = async (lng) => {
 await i18n.changeLanguage(lng);
 const isRTL = i18n.dir(lng) === 'rtl';
 I18nManager.forceRTL(isRTL);
 // On Android, you may need to restart the app for full RTL effect
};

완전한 RTL 경험을 위해 과 ]을 주의 깊게 사용합니다. ]]react-native-restyle과 같은 라이브러리를 사용하여 테마 기반 방향을 고려하십시오.

서버에서 번역을 로딩 (Over-the-Air)

앱 스토어 업데이트없이 언어를 추가해야하는 응용 프로그램을 위해, 백엔드에서 번역 JSON을 fetch. 사용 i18next-http-backend React Native에 대한 사용자 정의 백엔드와 함께:

import HttpBackend from 'i18next-http-backend';

i18n.use(HttpBackend).init({
 backend: {
 loadPath: 'https://your-api.com/locales/{{lng}}/{{ns}}.json',
 },
 fallbackLng: 'en',
 ns: ['common', 'home'],
 defaultNS: 'common',
});

AsyncStorage에서 fetched 번역을 반복된 요청을 피하기 위해 캐시합니다. 업데이트된 파일만 다운로드하는 버전 메커니즘과 결합합니다.

성능 고려

  • ]이름공간 분할: 현재 화면에 대한 번역만 로드한다. 게으른 로딩은 초기 번들 크기를 감소시킨다.
  • Avoid re-renders: ] Hook은 이미 언어 변경에 따라 하위스케이프를 최적화합니다. 를 가진 비싼 성분을 포장합니다.
  • Pre-compile Translation file: 빌드 중 JSON을 축소한 형식으로 변환합니다.
  • 대형 앱를 위해 ]i18next-scanner를 사용하여 코드를 사용하여 번역 키를 자동으로 추출합니다.

Multi-Language 기능 테스트

번역 파일에 대한 단위 테스트를 작성: 누락된 키를 보장, 모든 주주가 제공되지 않습니다, 복수 및 제대로 작동. 사용 모조 i18n 인스턴스. 통합 테스트, 언어 스위치를 시뮬레이션하고 구성 요소 표시 올바른 텍스트를 확인합니다. 또한 두 플랫폼에서 RTL 레이아웃 렌더링을 테스트.

최고의 연습 Recap

  • Always 사용 번역 키-never hardcode user-facing 문자열.
  • Keep 번역은 구성 으로 기능 또는 화면(namespaces).
  • Oakback languages UI를 깨는에서 불완전한 번역을 방지하기 위해.
  • ]실제 기기에서 테스트 다른 로컬 설정.
  • 더 나은 문화적 차이 언어 넘어: 날짜 형식, 색상 의미, 이미지.
  • ] i18n 워크플로를 번역자 및 개발자에게 전달합니다.

React Native의 다국어 지원 구현은 보상 투자입니다. react-i18next]과 ]react-native-localize]와 같은 라이브러리를 통해 사용자 기반을 확장하는 강력한 시스템을 구축할 수 있습니다. 또한, react-i18next documentation[LT:3]]]]를 참조하여 사용자 기반을 확장하는 강력한 시스템을 구축할 수 있습니다. 더 읽기를 위해서는 react-i18next documentation[LT:[LT:7]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]