Covendia Sebuah Sistem Dukungan Multi-bahasa dalam React Apps Pribumi

Meminstal pustaka inti

Dimulai dengan memasang paket yang diperlukan:

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

Secara opsional menambahkan i18next-browser-languagedetector untuk deteksi bahasa otomatis berdasarkan preferensi perangkat. Perlu dicatat bahwa Anda mungkin perlu untuk menghubungkan modul asli untuk reaction-native-locualize (auto-linking dalam RN 0.60+).

Istansi I18n Menetapan Kependudukan

Arondisemenkand membuat berkas konfigurasi, misalnya, :

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;

Menggunakan nama dana react-native-locualize memastikan aplikasi anda menghormati pengaturan regional perangkat. Fungsi berjalan sekali dan menetapkan bahasa awal. Untuk pembaruan berkelanjutan (jika pengguna mengubah bahasa perangkatnya saat aplikasi terbuka), anda dapat berlangganan perubahan.

Struktur Berkas Terjemahan Bahasan

Organisasi terjemahan Anda dalam berkas JSON bersarang oleh bahasa dan ruang nama. Contoh untuk :

{
 "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."
 }
}

Kegunaan ruang-nama (misalnya, , ) membantu mengelola aplikasi-aplikasi besar dan memungkinkan pemuatan malas dari potongan terjemahan.

Terjemahan Terjemahan Bahasan dalam Komponen

hooks useTranslation

Dalam komponen fungsional apapun:

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

Parameter t fungsi interpolates variabel dan menangani plural. Untuk mengubah bahasa, sebut ⁇ ini memicu sebuah re-render dari semua komponen yang dilanggani.

Wonedon menggunakan komponen Trans

Untuk komplet string dengan bandit atau komponen React:

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

 Welcome, {user}!

ORb - ORANG Plural, Jenis Jantina, dan Konteks

iEgonext mendukung aturan plural lanjutan keluar dari kotak. Definisikan kunci dengan akhiran atau penggunaan konteks. Contoh:

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

Penggunaan ke Luaran: secara otomatis memilih bentuk yang benar berdasarkan lokal. Jenis kelamin dan konteks lain dapat ditangani melalui pilihan .

Beralih dan Kekalan Bahasa Dinamik

Untuk bertahan pada preferensi bahasa pengguna, simpan bahasa terpilih dalam AsyncStorage[ (atau react-native-mmkv) dan muat pada startup aplikasi. Ubah konfigurasi 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 },
});

Sekarang ketika pengguna beralih bahasa, preferensi disimpan dan secara otomatis dipulihkan pada peluncuran berikutnya.

Dukungan Kanan-ke- Kiri (RTL)

Penduduk Asli React mendukung RTL melalui modul . Bila bahasa tersebut adalah bahasa Arab, Ibrani, atau Persia, paksa 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
};

Untuk pengalaman RTL yang lengkap, gunakan dan dengan hati-hati. Pertimbangkan menggunakan pustaka seperti react-native-restyle untuk arah berbasis tema.

Memuat terjemahan dari Server (Teratas-Air)

Untuk aplikasi yang perlu menambahkan bahasa tanpa pembaruan toko aplikasi, ambil terjemahan JSON dari sebuah backend. Gunakan i18next-http-backend[ dengan backend tersendiri untuk React Pribumi:

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

Cache terjemahan yang diambil dalam AsyncStorage untuk menghindari permintaan berulang. Gabung dengan mekanisme versi untuk hanya mengunduh berkas yang diperbarui.

Pertimbangan Kinerja Kinerja