Table of Contents
بناء تطبيقات تتحدث لغة المستعمل الأصلية لم يعد ضرورة عمل كمالية، حيث يستمر الاستخدام المتنقل في الانفجار على الصعيد العالمي، يتوقع المستعملون أن يشعروا بالطابع المحلي، من النص الذي يقرأونه إلى الشكل الذي يتم فيه تصميم الأرقام والتواريخ، إعادة التصنيع، الإطار الشامل الذي وضعته الميتا، يسمح للمطورين ببناء أجهزة متحركة ذات أداء لليوس و أندرويد من قاعدة بيانات واحدة.
المحلية مقابل التدويل: تحديد المصطلحات
قبل التخلّص من الشفرة، من المهم التمييز بين مفهومين متصلين. Internationalization (i18n)) هي عملية تصميم تطبيقك بحيث يمكن تكييفه مع مختلف اللغات والمناطق دون الحاجة إلى تغييرات هندسية، وهو ينطوي على استخلاص النص باستخدام شكل مُلموس محلياً للتواريخ والأرقام، والتخطيط لنظم الكتابة المختلفة.
ولا يوفر " رد الفعل " نفسه سوى عدد قليل من المؤشرات الأساسية للكشف على الصعيد المحلي (مثلاً من وحدة )، ولكن التمركز الكامل يتطلب مكتبة مخصصة لإدارة موارد الترجمة، وتغيير اللغات، والتشكيل، ويوفر النظام الإيكولوجي عدة خيارات ناضجة، لكل منها مواطن قوة خاصة به.
المكتبات الأساسية للتمركز المحلي من أجل رد الفعل
وتهيمن ثلاث مكتبات على مشهد إعادة التأهيل المحلي، فهم أدوارها وكيفية استكمال بعضها البعض هي الخطوة الأولى نحو التنفيذ القوي.
ردة فعل 18
(أ) بناء على [(FLT:0]i18next]، أحد أُسسُع أطر التدويل في جافاسكريبت، ) هو حل كامل لإدارة الترجمة التحريرية، وهو يوفر العناوين المتفاعلة (])، ومكونات أعلى من حيث التوزيع، وملف ترجمة يقوم تلقائياً بإعادة ترجمة البيانات عند تغيير اللغات.
وتشمل المزايا الرئيسية للرد على النسل الأيكولوجي الثري للبلوغين والقدرة على تحميل الترجمة عند الطلب (توزعها بطريق أو سمة)، كما أنها تعمل بلا هوادة مع إصدار الخادم في أجزاء غير ردة الفعل من رمزك الإندرويدي أو أيوس الأصلي عن طريق محرك i18next الأساسي.
التفاعل المحلي
بينما يتعامل رد الفعل رقم 18 مع منطق الترجمة، فإن هذه القيم حاسمة بالنسبة لأرقام التكوين والتواريخ وصحية، لأن أجهزة إعادة التصنيع تُستخدم على منصتين مختلفتين، حيث يُستخدم هذا الرقم محلياً في الموقع، وجهاز قياس درجة الحرارة، وجهاز القياس، ونوع التقويم، وهذه القيم حاسمة بالنسبة لتشكيل الأرقام، والتواريخ، وصحيح.
يمكنك الجمع بين التفاعلات المحلية مع رد الفعل - أي 18 عن طريق تغذية اللغة المكتشفة في عملية البدء من طراز i18next وهذا يعطيك خبرة سلسة وجهازية الدفع: عندما يغير المستخدم لغة هاتفه، يتحول التطبيق تلقائيا إلى الترجمة المقابلة.
I18n —js
تقدم المشاريع الصغيرة أو المطورين الذين يفضلون اتباع نهج الوزن الخفيف، الحد الأدنى من المعلومات المسبقة عن علم، وتوفر مشاهدات بسيطة للترجمة، وقواعد التعددية، وطريقة تحديد التاريخ/الرقم، غير أنها تفتقر إلى الكشف اللغوي المبني ولا تدمج مع دورة الحياة المكونة للرد، وتستخدمها أفرقة كثيرة كنموذج للمرافقة للترجمة غير المستخدمة في نظام الإبلاغ الموحد (مثلا، عناصر المساعدة على الحد من النسخ).
وثمة بديل ناشئ هو [(FLT:6]]، وهو مدرج في النظام الإيكولوجي للمعرض، وهو يعكس قدرات إعادة الاستخدام في الموقع، ولكنه مصمم خصيصاً لتدفقات العمل المدارة، وإذا ما كنت تبنى مع نظام " Expo " ، فإن ] كثيراً ما يكون أسهل طريقة للحصول على بيانات محلية.
بناء تطبيق متعدد اللغات: تنفيذ الإجراءات المتعلقة بالطرق المتعددة
لنمشي خلال عملية إضافة الموقع إلى مشروع جديد لـ " ريك " الأصلي " باستخدام أكثر الحزمة شيوعاً: ردة فعل 18 للترجمة و إعادة الترجيح
1- تركيب الأقاليم
:: إدارة القيادة التالية لإضافة المكتبات وأقرانها:
npm install react-i18next i18next react-native-localize
إذا كنت تستخدم المعرض، تركيب ] بدلا من وإضافات و رزم.
2 - المصادرة I18next
إنشاء ملف [أو ] لـ (نوع سكريت) في جذر مشروعك هذا الملف سينشئ جهاز i18next instance، موارد ترجمة الواردات، ويدمج جهاز الكشف المحلي.
وفيما يلي تشكيل نموذجي:
import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import { getLocales } from 'react-native-localize';
import en from './locales/en.json';
import es from './locales/es.json';
import fr from './locales/fr.json';
import de from './locales/de.json';
// Detect device language
const languageDetector = {
type: 'languageDetector',
async: false,
detect: () => {
const locales = getLocales();
return locales[0]?.languageCode ?? 'en';
},
init: () => {},
cacheUserLanguage: () => {},
};
i18n
.use(languageDetector)
.use(initReactI18next)
.init({
resources: {
en: { translation: en },
es: { translation: es },
fr: { translation: fr },
de: { translation: de },
},
fallbackLng: 'en',
interpolation: {
escapeValue: false, // React already safes from XSS
},
});
export default i18n;
هذه التشكيلة تستخدم تفاعلات ذات موقع محلي لإسترجاع لغة الجهاز الرئيسي لغة التداعيات تضمن عدم إبطال الترجمة
3- إنشاء ملفات للترجمة المشتركة بين الوزارات
داخل ملف ، يُنشئ ملفات منفصلة لكل لغة مدعمة.
{
"welcome": "Welcome",
"greeting": "Hello, {{name}}!",
"notifications": {
"new_message": "You have {{count}} new message",
"new_message_plural": "You have {{count}} new messages"
}
}
{
"welcome": "Bienvenido",
"greeting": "¡Hola, {{name}}!",
"notifications": {
"new_message": "Tienes {{count}} mensaje nuevo",
"new_message_plural": "Tienes {{count}} mensajes nuevos"
}
}
Notice the suffix-i18next automatically handles plural forms based on the count provided when calling the translation function.
4 - اغتصاب التأليف بمورد من طراز I18next
في عنصرك الجذري (مثلاً، )، تستورد التشكيلة الـ 118 وتغلف كل شيء مع (اختياري ولكن يوصى به للقابلية للاختبار) وفي معظم الحالات، تكون الواردات كافية لأن تسجلها في سياق رد الفعل.
import React from 'react';
import { SafeAreaView } from 'react-native';
import './i18n'; // Ensure i18n is initialized before any component
import MainScreen from './screens/MainScreen';
const App = () => (
<SafeAreaView style={{ flex: 1 }}>
<MainScreen />
</SafeAreaView>
);
export default App;
5- استخدام العناصر الداخلية للترجمة
Inside any job component, use the hook to access the function:
import React from 'react';
import { View, Text, Button } from 'react-native';
import { useTranslation } from 'react-i18next';
const MainScreen = () => {
const { t, i18n } = useTranslation();
const changeLanguage = (lng) => {
i18n.changeLanguage(lng);
};
return (
<View>
<Text>{t('welcome')}</Text>
<Text>{t('greeting', { name: 'Maria' })}</Text>
<Button title="Español" onPress={() => changeLanguage('es')} />
<Button title="Français" onPress={() => changeLanguage('fr')} />
</View>
);
};
export default MainScreen;
The function automatically re-evaluates when the language changes, and the component re-renders thanks to the React context integration.
رسوم الترقية المحلية المتقدمة
وبالإضافة إلى الترجمة البسيطة للقيمة الرئيسية، تتطلب تطبيقات الإنتاج الدعم للتعددية، وتاريخ/رقم التكوين، والتكيف مع التصميم المباشر.
التعددية والاستمرارية
(أ) استخدام صيغة الرسائل الصادرة عن الاتحاد الدولي لجمعيات الصليب الأحمر والهلال الأحمر لمعالجة القواعد التعددية، أما المثال الوارد أعلاه في [( و، فيبين أبسط الحالات، أما بالنسبة للغات ذات قواعد تعددية أكثر تعقيداً (مثل المتغيرات العربية، الروسية)، فيمكن أن تقدم أشكالاً إضافية مثل ، ، أو تستخدم [36]
// Example for Russian
{
"unread_messages": "{{count}} непрочитанное сообщение",
"unread_messages_few": "{{count}} непрочитанных сообщения",
"unread_messages_many": "{{count}} непрочитанных сообщений"
}
To format dates and numbers, you can either use the API (avaScript motors) or rely on a library like Luxon or ]dates [FLT:] adjacents. A common format is to create utility translation functions that accepte local.
الحق في الدفاع عن العيون
React Native has built -in support for RTL languages like Arabic and Hebrew. Enable it by setting the and in your root file, based on the current language. When the user shiftes to an RTL locale, all flexbox directions automatically turn. However, you must ensure that your fashions use logical properties (FT.41, [.]
import { I18nManager } from 'react-native';
// Inside your language switch handler:
if (newLanguage === 'ar') {
I18nManager.forceRTL(true);
} else {
I18nManager.forceRTL(false);
}
(أدرك أنّ (توغل (آر تي إل يتطلب إعادة تشغيل كامل على بعض النسخ من (أندرويد يمكنك تحذير المستعمل أو تنفيذ إعادة تشغيل باستخدام [(FLT:44]
أفضل الممارسات في مجال الإنتاج المحلي
إن العمل الأساسي هو شيء واحد، وبناء نظام محلي قابل للاستمرار، ومرتجع، هو نظام آخر، وأفضل الممارسات التالية ستوفر لك الوقت وتمنع الحشرات المحبطة.
تنظيم ملفات الترجمة التحريرية حسب درجة المعالم
ينبغي أن تتجنب التطبيقات الكبيرة ملفاً واحداً من ملفات الـ (JON) الأحادية كل لغة، بدلاً من ذلك، استخدام سمة (I18next) لتقاسم الترجمات حسب السمات أو الشاشة، على سبيل المثال، ، .
دائماً ما تقدم لغة التخلف
لا يجب أن ينهار تطبيقك لأن مفتاح الترجمة مفقود، حدد لغة التقلبات (الإنكليزية عادة) التي تحتوي على كل مفتاح يستخدم في التطبيق، إذا لم يكن هناك مفتاح في لغة المستخدم، فإن (اي18نكست) سيظهر قيمة التراجع، وهذا مهم بشكل خاص أثناء التطوير المبكر عندما لا تكون جميع الترجمات كاملة.
استخدام اتفاقية رئيسية للتقدير
(ب) اعتماد هيكل متسق لمفاتيح الترجمة التحريرية الخاصة بك، وتشمل الاتفاقيات المشتركة استخدام الملاحظات (]، ]]) أو نقل الهيكل الهرمي للمكون () وينبغي أن تكون المفاتيح وصفية بما يكفي لتحديد موقع استخدامها بسرعة.
ترجمة مستقلة للمرفق
ولا يوجد أي شيء يظهر في مرفق التأمين الشامل هو سلسلة ثابتة، ولا ينبغي نقل المحتوى المستخرج من المستعمل أو أسماء المنتج أو البيانات الدينامية من خلال وظيفة - بل يحتاج إلى منطق تخزينه وشكله، ولا يُحتفظ بموارد الترجمة إلا لعلامات التطبيق والأخطاء والرسائل.
تدفقات عمل الترجمة الآلية
وبالنسبة لفرق من المترجمين المهنيين، النظر في الاندماج مع نظام إدارة الترجمة التحريرية مثل لوكاليز أو كرودين أو برازي، وهذه البرامج ترتبط بمستودع شفراتكم، وتدفع سلاسل المصادر المستكملة، وتسحب الملفات المترجمة، وهذا التشغيل الآلي يحول دون ترجمة التحريرات اليدوية ويقلل من الجهد اليدوي.
اختبار التطبيقات المحلية
اختبار تطبيقات متعددة اللغات يتطلب أكثر من مجرد التحقق من أن النص يتغير يجب أن تتحقق من أن كل العناصر تتكيف بشكل صحيح
محاكاة مختلف المحليات على متن مركبة
كل من إستديو "إكسيد" و"أندرويد" يسمحان لك بوضع منطقة الجهاز ولغته، بالنسبة للجهاز، يمكنك تغيير اللغة في خيارات تشغيل المخطط، بالنسبة للـ(أندرويد) يمكنك أن تخلق مرشداً جديداً مع شخص عادي، وتختبر كل لغة مدعومة على كلا المنبرين لتكشف عن المسابقات الخاصة بالمنبر (مثلاً، المختارين للمواعيد قد لا يحترمون موقعك على الروايات القديمة والستيرويد).
وحدة ترجمات
(أ) أن تُكتب اختبارات لتشكيلك الـ18 لضمان أن تحل جميع المفاتيح حلاً صحيحاً للغات الأساس والتراجع، وأن تستخدم إطاراً اختبارياً مثل (جيست) لتحميل التشكيلة واتصال ] لكل لغة، وسيظهر مفتاح مفقود في الناتج على أنه ، مما يسهل كشفه.
import i18n from '../i18n';
test('all translation keys exist in English', () => {
const keys = ['welcome', 'greeting', 'notifications.new_message'];
keys.forEach(key => {
expect(i18n.t(key)).not.toBe(key);
});
});
اختبار التراجع البصري
يمكن أن تسبب سلسلة النصوص الطويلة بلغات مثل الألمانية أو الفنلندية زيادة في التدفق، واستخدام اختبارات الطلقات (مثلاً، صور الجيب مع تشكيلات محلية مختلفة) أو أدوات التراجع البصري المكرس مثل بيرسي للصيد من اليورانيوم، وقيادة طريقة الارتداد عن طريق إجبار في بيئة الاختبار الخاصة بك.
اعتبارات الأداء
لا يجب أن يُساوم التدبير في أداء التطبيق، هنا بعض النصائح لإبقائك مُتسرعاً في تطبيقك.
- ترجمة قوية: ترجمة غير رسمية] استخدام خيار I18next أو الواردات الدينامية لاستقبال ملفات اللغات إلا عند الحاجة، وهذا يقلل من حجم الحزمة الأولية.
- Avoid re —registering resources:] Initialize your i18n instance once at app startup. Changing the language should not require reloading all translation files from the network.
- Memoize formatted values:] If you are performing expensive date or number formatting inside a render cycle, wrap the result in ] to avoid recalculations on every re-render.
- Consider using a translation cache:] For apps that allow offline language shifting, store translations in AsyncStorage or a similar local database.
خاتمة
إن إنشاء نظام وطني متعدد اللغات للتفاعل يتطلب أكثر من مجرد مبادلات، ويتطلب هيكلاً مدروساً يتعامل مع كشف الأجهزة المحلية، وإدارة الترجمة، والتعددية، والتشكيل/التاريخ، وتصميم نظام RTL، باختيار مكتبة قوية مثل إعادة تشغيل الموقع الشبكي - 18 مقترنة بترددات عالية، يمكنك بناء تجربة تشعر بها من السكان الأصليين في كل زاوية من أركان العالم.
وتذكر أن التدبير المحلي هو عملية مستمرة تحتاج إلى تحديثات، ويمكن إضافة لغات جديدة، ويجب احترام المعاني الثقافية، والاستثمار في استخدام الأدوات في وقت مبكر، وإنشاء سير عمل واضحة مع فريق الترجمة التحريرية، والاختبار بلا هوادة، ويدفع الجهد رضى المستعملين، وزيادة الاحتفاظ بها، وتوسيع نطاق الوصول إلى الأسواق.
وللحصول على مزيد من القراءة، يرجى الرجوع إلى الوثائق الرسمية reacti18next] و]reactative —-native —]. ويمكن أيضاً أن تجد ]i18next plugin list لغة مفيدة لتوسيع نطاق التشغيل الصحيح.