Створення багатомовної системи підтримки в React рідних додатках

Встановлення базових бібліотек

Починайте установку необхідних пакетів:

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

Додатково додайте i18next-browser-languagedetector для автоматичного виявлення мови на основі налаштувань пристрою. Зверніть увагу, що вам може знадобитися зв'язати рідні модулі для реагнос-локалізу (автозв'язку у RN 0.60+).

Налаштування i18n Instance

Створіть файл конфігурації, наприклад, :

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;

Використання реакт-натив-локаліза забезпечує Ваш додаток повагу регіональних налаштувань пристрою. Функція працює один раз і встановлює початкову мову. Для безперервних оновлень (якщо користувач змінює мову пристрою, а додаток відкрито), ви можете підписатися на .

Структура файлів перекладу

Організуйте переклади в гніздованих файлах 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."
 }
}

Використання просторів імен (наприклад, , ) дозволяє керувати великими додатками і дозволяє завантаження мережних фрагментів перекладу.

Використання перекладів в компонентах

ВикористанняЗаправки гачок

У будь-якому функціональному компоненті:

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

Для складних рядків з вбудованим розміткою або компонентами React:

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

 Welcome, {user}!

Рукоділля, ґендер, контекст

i18next підтримує розширені правила з коробки. Визначте ключі з suffix або використовувати контекст. Приклад:

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

Використання: автоматично вибирає правильну форму на основі локального. Стать та інші контексти можна обробляти за допомогою параметра .

Динамічний мовний комутатор і наполегливість

Щоб зберегти мову користувача, зберігайте вибрану мову 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)

Реакція 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)

Для додатків, які потрібно додати мови без оновлення магазину додатків, переклад fetch JSONs з задньої частини. Використовуйте i18next-http-backend] з користувальницький задньої частини для React рідних:

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

Вставте переклади з перекладу, щоб уникнути повторних запитів. З'єднайте з механізмом редагування для завантаження оновлених файлів.

Оцінка продуктивності

• Використовувати простір імен: Тільки переклади навантаження для поточного екрана. Лази завантаження зменшує початковий розмір пакету.
• ]Avoid re-renders: гачок вже оптимізує тільки переклад мовних змін. Обгортання дорогих компонентів .
• Pre-compile translation files: Під час побудови перетворення JSON до норифікованого формату.
• Для великих додатків, розглянути використання i18next-scanner для автоматичного вилучення ключів перекладу з бази даних коду.

Тестування багатошарової функціональності

Написати тести на ваш переклад файлів: забезпечити відсутні ключі, всі власники сайтів надаються, і plurals працюють правильно. Використовуйте з mock i18n екземпляр. Для інтеграції тестів, імітації мовних перемикачів і перевірки компонентів, які відображають правильний текст. Також тестування RTL макетування надає на обох платформах.

Кращі практики рекап

• Always використовують ключі перекладу—never hardcode user-facing strings.
• Keep translations організовано за допомогою функції або екрана (простори назв).
• Використовувати мови для запобігання неповних перекладів з розбиття UI.
• Test on real devices з різними налаштуваннями локалізації.
• Consider Cultural відмінності за межі мови: формати дати, значення кольорів, зображення.
• Документуйте свій i18n робочий потік для перекладачів і розробників.

Реалізація багатомовної підтримки в React Native є винагородою інвестицій. З бібліотеками, такими як react-i18next і react-native-localize], ви можете побудувати надійну систему, яка масштабує з вашим бази користувача. Для подальшого читання, зверніться до офіційної react-i18next документації], i18next основний напрям, і [F:4]