ایجاد یک سیستم پشتیبانی چند زبان در برنامه های بومی React

ایجاد یک سیستم پشتیبانی چندزبان در React Native Apps

برنامه های تلفن همراه که از زبان های متعدد پشتیبانی می کنند دیگر اختیاری نیست - این یک نیاز برای هر برنامه با هدف پذیرش جهانی است. React Native، با قابلیت های متقابل پلتفرم خود، ارائه می دهد چندین رویکرد قوی برای پیاده سازی بین المللی (i18n) و محلی سازی (l10n) این مقاله یک راهنمای عمیق برای معماری یک سیستم پشتیبانی چند زبان در React، بهترین تنظیمات، تنظیمات پیچیده (LRT) و تنظیمات مستقیم.

مفاهیم اصلی محلی سازی

محلی سازی فراتر از ترجمه متن ساده است.این شامل اعداد قالب بندی، تاریخ، ارزها، هدایت متن (LTR در مقابل RTL)، کثرت، اشکال جنسیتی و حتی تنظیم طرح های UI برای متناسب با رشته های ترجمه شده است.یک سیستم i18n به خوبی طراحی شده محتوای قابل ترجمه را از پایگاه کد شما جدا می کند، از ارجاع های مبتنی بر کلید استفاده می کند و از زبان بدون نیاز به یک برنامه اجرا می کند.

چالش های کلیدی در React Native

• ماژول های بومی برای تشخیص دستگاه محلی (اختاف بین iOS و Android)
• فایل های ترجمه با سرعت و ذخیره سازی
• مدیریت حالت برای زبان فعال در سراسر برنامه (از جمله ناوبری و ترجیحات پایدار)
• استفاده از طرح های RTL – React Native از (FLT:0) پشتیبانی می کند اما نیاز به هماهنگی دقیق دارد.
• تست و تأیید تمام رشته های ترجمه شده در متن.

انتخاب کتابخانه ی راست i18n

در حالی که چندین کتابخانه وجود دارد، [FLT] محبوب ترین و کامل ترین گزینه برای React Native است. i18next [FLT3]، آن را فراهم می کند قلاب، HOCs و اجزای برای ادغام یکپارچه.

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

به صورت اختیاری (FLT:0) {FLT:i18next-browser-زبان شناس برای تشخیص زبان خودکار بر اساس ترجیحات دستگاه، توجه داشته باشید که ممکن است شما نیاز به پیوند ماژول های بومی برای واکنش محلی سازی (autolinking in 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;

استفاده از فعال سازی محلی تضمین می کند که برنامه شما به تنظیمات منطقه ای دستگاه احترام می گذارد. عملکرد یک بار اجرا می شود و زبان اولیه را برای به روز رسانی های مداوم (اگر کاربر تغییر زبان دستگاه خود را در حالی که برنامه باز است)، شما می توانید به اشتراک بگذارید (FLT5: تغییرات).

ترجمه فایل های ترجمه

ترجمه های خود را در فایل های 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."
 }
}

استفاده از فضاهای نام (به عنوان مثال، ، کمک می کند تا برنامه های بزرگ را مدیریت و بارگذاری تنبل قطعات ترجمه را فعال کند.

استفاده از ترجمه در اجزای

استفاده ازTranslation قلاب

در هر جزء عملکردی:

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

[در این میان] تابع متغیرهای متقابل را تقسیم می کند و به تغییر زبان، تماس می گیرد [FLT 11:]، این باعث می شود که دوباره از تمام اجزای مشترک جدا شود.

استفاده از اجزای ترانس

برای رشته های پیچیده با نشانه گذاری جاسازی شده یا اجزای React:

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

 Welcome, {user}!

مدیریت پلورها، جنسیت و زمینه

i18next از قوانین پیشرفته ی چندپله پشتیبانی می کند و کلید های تعریف شده با [FLT13] suffix یا استفاده از را تعریف می کند.

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

استفاده: به طور خودکار فرم صحیح را بر اساس گزینه محلی انتخاب می کند. جنسیت و دیگر زمینه ها می توانند از طریق گزینه اداره شوند.

تغییر زبان پویا و پر اصرار

برای ادامه اولویت زبان کاربر، زبان انتخاب شده را در AsyncStorage ذخیره کنید (یا react-nact-nact-nact-mmkv و بارگذاری آن در راه اندازی برنامه.

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 از طریق ماژول (FLT:19) پشتیبانی می کند، زمانی که زبان عربی، عبری یا فارسی است، 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، از استفاده کنید و [FLT 22] با دقت از یک کتابخانه مانند سبک فعال برای جهت مبتنی بر تم استفاده کنید.

ترجمه های بارگذاری شده از یک سرور (Over-the-Air)

برای برنامه هایی که نیاز به اضافه کردن زبان بدون به روز رسانی فروشگاه برنامه دارند، JSON های ترجمه را از یک backend دریافت کنید.استفاده از i18next-http-backend [[۱۰] با یک 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 برای جلوگیری از درخواست های مکرر.ترکیب با یک مکانیزم نسخه سازی فقط فایل های به روز شده.

ویژگی های Performance

• استفاده از تقسیم نام فضای ؛ فقط بارگذاری ترجمه برای صفحه نمایش فعلی. Lazy بارگیری اندازه بسته اولیه را کاهش می دهد.
• [[۱] [۱۰] [۱] [۱۰] [۱] [۱]]: [۱۰] [۱] [۱۰] [۱] [۳] [۳] [۱] [۳] [۳] [۳] [۳]] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳]] [۳] [۳]]] [۳] [۳] [۳] [۳]]] [۳]]]]] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳] [۳]
• فایل های ترجمه پیش از آن [FLT 1]: در طول ساخت، JSON را به فرمت های کوچک تبدیل کنید.
• [در این باره]، [برای برنامه های بزرگ ، استفاده از را در نظر بگیرید [FLT3] برای استخراج خودکار کلید ترجمه از پایگاه کد خود.