إنشاء نظام دعم متعدد اللغات في مجال الاستجابة الوطنية

ولم يعد بناء تطبيقات متنقلة تدعم لغات متعددة أمرا اختياريا، بل هو شرط لأي تطبيق يهدف إلى التبني على الصعيد العالمي، ويتيح رد الفعل الوطني، بقدراته الشاملة، عدة نُهج قوية لتنفيذ التدويل (i18n) والتدويل المحلي (l10n) ويوفر هذه المادة دليلا متعمقا لوضع نظام متعدد اللغات لدعم نظم إعادة التأهيل، يشمل المكتبات، والتكوين، والتبديل الدينامي، والطرق المتطورة، والتعامل مع قواعد الأداء المعقدة.

المفاهيم الأساسية للتمركز المحلي

ويتجاوز الترميز المحلي ترجمة النص البسيطة، ويشمل ذلك تحديد أرقام التواريخ والعملات وتناول التوجيه النصي (LTR vs RTL)، والتعددية، والأشكال الجنسانية، بل وتعديل مخططات التشغيل الموحدة لتلائم الخيوط المترجمة، ويفصل نظام i18 المصمم تصميما جيدا المحتوى القابل للتداول عن قاعدتك الرمزية، ويستخدم إشارات رئيسية، ويدعم التحول اللغوي غير المتفرغ دون الحاجة إلى إعادة تشغيل جهاز.

التحديات الرئيسية في مجال رد الفعل

  • وحدات محلية للكشف عن الأجهزة (الاختلافات بين اليوسفي والكولود).
  • ملفات التحميل والفحص
  • إدارة الدولة للغة النشطة عبر التطبيق بأكمله (بما في ذلك الملاحة والأفضليات المستمرة).
  • معالجة مخططات RTL - إعادة عطاءات وطنية ولكن يتطلب تنسيقاً دقيقاً.
  • اختبار وتحقق من جميع الخيوط المترجمة في السياق

اختيار المكتبة الأيمنية

While several Library exist, react-i18next is the most popular and feature-complete choice for React Native. Built on top of ]i18next], it provides hooks, HOCs detection, and components for seamless integration4

تركيب المكتبات الأساسية

ابدأ بتجميع الطرود المطلوبة:

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

(أ) إضافة i18next-browser-languagedetector] إلى الكشف اللغوي التلقائي استناداً إلى أفضليات الأجهزة.

وضع أعلى I18n Instance

Create a formation file, e.g., ]:

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;

(ب) أن تستخدم ] إعادة الاستخدام في الموقع الأصلي تضمن تطبيقك احترام الأطر الإقليمية للجهاز، وتدير وظيفة ] مرة واحدة وتضع اللغة الأولية، ولإجراء تحديثات مستمرة (إذا غيّر المستخدم لغة جهازه بينما يكون التطبيق مفتوحاً)، فيمكنك أن توافق على التغييرات .

هيكل ملفات الترجمة التحريرية

(ج) تنظيم ترجماتك في ملفات (الجوسون) المحشوة حسب اللغات وأماكن الاسم، مثال لـ :

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

The t] function interpolates variables and handles plurals. To change language, call - this triggers a re-render of all subscribed components.

استخدام عنصر النقل

بالنسبة للسلاسل المعقدة التي تحتوي على علامات أو مكونات رد الفعل:

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

 Welcome, {user}!

معالجة البلوريات، ونوع الجنس، والسياق

i18next supports advanced plural rules out of the box. Define key with suffix or use context.

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

Usage: automatically selects the correct form based on locale. Gender and other contexts can be handled via the option.

تحويل اللغة الدينامية والاستمرار

To persist the user’s language preference, store the selected language in AsyncStorage] (or ]react-native-mmkv) and load it on app startup. Modify the i18n formation:

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

الآن عندما يبدل المستخدم اللغة، يتم الحفاظ على الأفضلية ويعاد تلقائيا عند الإطلاق المقبل.

الدعم المقدم من الجهات المعنية بالحق في الملكية

React Native supports RTL via the ] module. When the language is Arabic, Hebrew, or Persian, force 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
};

For a complete RTL experience, use and carefully. Consider using a library like react-native-restyle] for theme-based direction.

ترجمة من خادم (أوفير-الآير)

For apps that need to add languages without app store updates, fetch translation JSONs from a backend. Use i18next-http-backend] with a custom backend for 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',
});

(أ) أن تُرسل الترجمة المُستَقطَعة في (سينك ستورج لتلافي الطلبات المتكررة، وأن تكون مُمتَجة بآلية نسخ لتحميل الملفات المستكملة فقط.

اعتبارات الأداء

  • Usese namespace divisionting]: Only load translations for the current screen. Lazy loading reduces initial bundle size.
  • Avoid re-renders]: The hook already optimizes by subscribing only to language changes. Wrap expensive components with .
  • Pre-compile translation files]: During build, transform JSON to minified format.
  • For large apps], consider using i18next-scanner] to automatically extract translation keys from your codebase.

اختبار الأداء المتعدد اللغات

:: برمجة اختبارات الوحدة لملفات الترجمة: ضمان عدم وجود مفاتيح مفقودة، وتوفير جميع المعالم، والعمل التعددي بشكل صحيح، واستخدام مع نموذج I18n instance، وفحص مفاتيح التحويل اللغوية والتحقق من أن المكونات تعرض النص الصحيح، وكذلك اختبار مخططات RTL التي تصدر على كلا المنبرين.

أفضل الممارسات

  • Always use translation keys -never hardcode user-facing strings.
  • Keep translations organized] by feature or screen (namespaces).
  • استخدام لغات التراجع ] لمنع الترجمات غير الكاملة من كسر وحدة التفتيش المشتركة.
  • testing on real devices] with different locale settings.
  • Consider cultural differences] beyond language: date formats, color meanings, images.
  • ] احجزوا سير عملكم ال18 ] للمترجمين والمطورين.

(أ) تنفيذ الدعم المتعدد اللغات في شركة React Native هو استثمار مكافئ، حيث يمكن للمكتبات مثل ]react-i18next و إعادة تحديد موقع ، أن تبني نظاماً قوياً يمتد إلى قاعدة مستخدميك().