יצירת מערכת תמיכה בשפה רב תגובות ל- Native Apps

יצירת מערכת תמיכה רב-לאנגואז ב- React Native Apps

בניית יישומים ניידים התומכים בשפות מרובות כבר לא אופציונליים - זה דרישה לכל אפליקציה שמטרתה אימוץ גלובלי.תגובה Native, עם יכולות חוצה פלטפורמות שלה, מציעה כמה גישות חזקות ליישם בינאום (i18n) ו Localization (l10n) מאמר זה מספק מדריך מעמיק לאדריכל מערכת תמיכה רב-לשונית ב React Native, סודיות, תצורה דינמית, החלפת כללים מורכבים, ימין-לפרקטיקאי) והתאמות הטובות ביותר (L-שמאליות).

מושגים מרכזיים של Localization

ההתמחות הולכת מעבר לתרגום טקסט פשוט.זה כרוך במספרים, תאריכים, מטבעות, כיוון טקסט (LTR לעומת RTL), פלורליזציה, צורות מגדר ואפילו התאמת הפריסה UI כדי להתאים מחרוזת מתורגם.מערכת i18n מעוצב היטב מפרידה תוכן translatable מבסיס הקוד שלך, משתמשת בהפניות מבוססות מפתח, ותומכת בהחלפת שפה ללא צורך יישום מחדש.

אתגרים מרכזיים ב React Native

מודולים Native עבור המכשיר המקומי זיהוי (הבדלות בין iOS לאנדרואיד).
טעינה יעילה וקבצי תרגום צ'נג.
ניהול המדינה עבור השפה הפעילה בכל האפליקציה (כולל ניווט והעדפות מתמשך).
הפריסה של RTL - React Native תומך FLT:0, אבל דורש היערכות זהירה.
בדיקה ואמת כל המחרוזת המתורגמת בהקשר.

בחירת הספרייה הנכונה

בעוד כמה ספריות קיימות, (FLT:0) ,i18nextofFLT (הראשונה ל- 1) היא הבחירה הפופולרית והמורכבת ביותר עבור React Native.נבנה על גבי FLT:2i18nextFLT 3, היא מספקת קובצי אינדיקטור, HOCs, ורכיבים עבור שילוב חלק.

התקנת ספריות הליבה

התחל על ידי התקנת חבילות הנדרשות:

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

באופן אופציונלי להוסיף (FLT:0i18 Next-browser-detectorph:1 עבור זיהוי שפה אוטומטית המבוסס על העדפות המכשיר. Note כי ייתכן שיהיה עליך לקשר מודולים ילידים עבור ânative-localize (auto-linking 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;

שימוש ב-FLT:0 â €-native-localizeFLT ( 1:1) מבטיח שהאפליקציות שלך מכבדות את ההגדרות האזוריות של המכשיר. הפונקציה FLT:4 פועל פעם אחת ומגדיר את השפה הראשונית.

תרגום לעברית Structure

ארגן את התרגומים שלך בקובץ 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."
 }
}

שימוש במונחי שם (למשל, FLT:8, ; ; ; ; ).

שימוש בתרגומים ב-Commonents

שם הסרטון: Translationion

בכל מרכיב פונקציונלי:

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

הפונקציה הבין-פולקטל:0 (הראשונה ל-[[1924]] ו[[1924]], היא [[המאה ה-20]], ו[[1924]], [[1924]], [[1924]], [[1924]]]], [[1924]]]], [[1924]]]]]], [[1924]]

שימוש ב- Transרכיב

עבור מיתרים מורכבים עם סמרטוט מוטבע או רכיבי תגובה:

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

 Welcome, {user}!

ידה פלורליות, מגדר וקונטקסט

i18next תומך בחוקי פלורליים מתקדמים מתוך הקופסה. Define עם suffix או השתמש בקונטקסט:

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

(ב) ניתן לטפל באופן אוטומטי בצורה הנכונה על פי ההקשרים המקומיים וההקשרים האחרים באמצעות אפשרות FLT:17.

שפה דינמית משתנה ו Persistence

כדי לעמוד בעדיפות השפה של המשתמש, לאחסן את השפה שנבחרה ב-FLT:0 (AsyncStorageFLT:1 (או FLT:2react-native-nbulcioFLT 3:3) ולהטען על יישום ההפעלה.

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 תומך RTL באמצעות מודול LT: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
};

(ב) ב[[1924]], [[1924]], [[1924]]]], [[1924]]]], [[1924]]]], [[1924]]]], [[1924]]]]]]]], [[1924]]]]]], [[1924]]]]]]]], [[1924]]]]]]]]

תרגום של הטקסטים מ- Server (Over-the-Air)

עבור יישומים שצריכים להוסיף שפות ללא עדכוני חנות יישומים, להביא תרגום JSONs מגיבוי (FLT:0i18 Next-http-backendtureFLT:1 עם תוספת אישית עבור 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',
});

Cache את התרגומים הנלהבים ב- AsyncStorage כדי להימנע מבקשות חוזרות ונשנות.שלב עם מנגנון גרסה כדי להוריד קבצים מעודכנים בלבד.

שיקולים

(ב) ,0) ,Use namespace פיצולtingFLT:1: רק תרגומים למסך הנוכחי.
(ב) ,0) ,(א) , ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇ ⁇
(ב) ,0) , תרגומים לתרגום פרי-שותף (Pre-compile Translation Files) 1: במהלך הבנייה, להפוך את ג'ייסון לתבנית ממומנת.
(ב) (ב) ב[[1924]], [[1924]], [[1924]]]]]], [[1924]]]]]], [[1924]]]]]], [[1924]]]]]]]]]], [[1924]]]]]]]]]], [[1924]]]]]]]]]]]], [[1924]]]]]]]]]]]], [[1924]]]]]]]]]]

מבחן Multi-Language function

כתוב בדיקות יחידה עבור קבצי התרגום שלך: אל תבטיחו מפתחות חסרים, כל בעלי המקום מסופקים, ופלורליסטים עובדים נכון. השתמש ב-RTL:26 עם מקרה לעג i18n. עבור בדיקות אינטגרציה, סימולציה מתגי שפה ולבדוק כי רכיבים להציג טקסט נכון.

הפרקטיקה הטובה ביותר

(ב) עיין ב[[1924]]: [[1924]]]]
(ב) מדרש (ב"ב) ,"ה' (ב"ב)"ב[[1924]], [[1924]]]]]]
(ב) ,0) שפות רדודות (FLT) 1 כדי למנוע תרגומים לא שלמים לשבור את UI.
(ב) ,0) , ⁇ (ב) ,ב"ה) ,"ב"ה, עם הגדרות מקומיות שונות.
(ב) ⁇ :0) ראו הבדלים תרבותיים בין הבדלים תרבותיים בין השאר: פורמטים תאריך, משמעויות צבע, תמונות.
(ב) ,0) ,התחייבו על ידי ה- i18n Workflow: 1 למתרגמים ומפתחים.

(הופנה מהדף "העם" (ב) "התמיכה בשפה רב-לשונית" (ב) ב"התגמל" (ב) ב[[1924]], ב[[1924]], ב[[1924]],]], ב[[1924]],]], [[1924]]]]]]]], [[1924]]]]]]]]]], [[1924]]]]]]]]]]]]]]]]]], [[1924]]]]]]]]]]]]]], [[1924]]]]]]]], [[1924]]]], [[1924]]]]]]]]]]]]]]]]]]]], [[1924]]]]]]]]]], [[1924]], [[1924]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]], [[1924]], [[1924]], [[1924]], [[1924]], [[1924]]]], [[1924]], [[1924]], [[1924]], [[1924]]]]]]]], [[1924]]]], [[1924]]]]]], [[1924]]]]]]]]]], [[1924]]]]]]]]]], [[1924]], [[