React Native RTL i18n Arabic
دليل React Native للعربية (1): إعداد i18next و I18nManager
ياسر نجيب •
لماذا i18next؟
تعتبر مكتبة react-i18next المعيار الذهبي في عالم React. سنقوم بدمجها مع I18nManager الخاص بـ React Native لقلب الاتجاه.
التثبيت
npm install i18next react-i18next intl-pluralrulesالتكوين الأساسي (i18n.js)
أنشئ ملفاً جديداً لتهيئة اللغات:
import i18n from "i18next";
import { initReactI18next } from "react-i18next";
import ar from "./locales/ar.json";
import en from "./locales/en.json";
i18n.use(initReactI18next).init({
compatibilityJSON: 'v3',
resources: {
en: { translation: en },
ar: { translation: ar },
},
lng: "ar", // اللغة الافتراضية
fallbackLng: "en",
interpolation: {
escapeValue: false,
},
});
export default i18n;تفعيل RTL
في ملف App.js أو عند تغيير اللغة، يجب التأكد من حالة I18nManager:
import { I18nManager } from 'react-native';
import i18n from './i18n';
const changeLanguage = (lang) => {
i18n.changeLanguage(lang);
const isRTL = lang === 'ar';
if (isRTL !== I18nManager.isRTL) {
I18nManager.allowRTL(isRTL);
I18nManager.forceRTL(isRTL);
// ملاحظة: قد تحتاج لإعادة تشغيل التطبيق (Reload) لتطبيق التغييرات بشكل كامل
}
};