React Native Apps में एक बहु भाषा समर्थन प्रणाली बनाना

मोबाइल अनुप्रयोगों का निर्माण जो एकाधिक भाषाओं का समर्थन करते हैं, अब वैकल्पिक नहीं है - यह वैश्विक गोद लेने के लिए किसी भी ऐप के लिए एक आवश्यकता है। React Native, अपनी क्रॉस-प्लेटफॉर्म क्षमताओं के साथ, अंतर्राष्ट्रीयकरण (i18n) और स्थानीयकरण (l10n) को लागू करने के लिए कई मजबूत दृष्टिकोण प्रदान करता है। यह लेख रिएक्ट नेटिव में बहु-भाषा समर्थन प्रणाली की संरचना करने के लिए एक गहन गाइड प्रदान करता है, जिसमें पुस्तकालयों, विन्यास, गतिशील स्विचिंग, जटिल बहुवचन नियमों को संभालने, सही-से-बाएं (RTL) लेआउट समायोजन और प्रदर्शन सर्वोत्तम प्रथाओं को शामिल किया गया है।

स्थानीयकरण की मुख्य अवधारणा

स्थानीयकरण सरल पाठ अनुवाद से परे चला जाता है। इसमें संख्याओं, तिथियों, मुद्राओं, पाठ दिशा (LTR बनाम RTL), बहुलीकरण, लैंगिक रूपों को संभालने और यहां तक कि अनुवादित स्ट्रिंगों को फिट करने के लिए यूआई लेआउट को समायोजित करने के लिए शामिल हैं। एक अच्छी तरह से डिज़ाइन किया गया i18n सिस्टम आपके कोडबेस से ट्रांसलेटेबल सामग्री को अलग करता है, कुंजी आधारित संदर्भों का उपयोग करता है, और एप्लिकेशन को पुनः आरंभ करने की आवश्यकता के बिना रनटाइम भाषा स्विचिंग का समर्थन करता है।

प्रतिक्रिया मूल में मुख्य चुनौतियों

  • डिवाइस लोकेल डिटेक्शन (आईओएस और एंड्रॉइड के बीच मतभेद) के लिए मूल मॉड्यूल।
  • कुशलतापूर्वक लोड हो रहा है और अनुवाद फ़ाइलों को कैश कर रहा है।
  • पूरे ऐप में सक्रिय भाषा के लिए राज्य का प्रबंधन (विज्ञापन और निरंतर प्राथमिकता सहित)।
  • RTL लेआउट को संभालने - प्रतिक्रियात्मक नेटिव समर्थन लेकिन सावधानीपूर्वक संरेखण की आवश्यकता है।
  • सभी अनुवादित स्ट्रिंग्स को संदर्भ में परीक्षण और सत्यापित करना।

राइट i18n लाइब्रेरी का चयन करना

जबकि कई पुस्तकालय मौजूद हैं, react-i18next React Native के लिए सबसे लोकप्रिय और सुविधा-पूर्ण विकल्प है। i18next] के शीर्ष पर निर्मित, यह निर्बाध एकीकरण के लिए हुक, HOCs और घटकों को प्रदान करता है। विकल्प में शामिल हैं [FLT:]i18n-js (सरल, लेकिन कम शक्तिशाली) और ]react-native-native-alize (स्थानीय पहचान के लिए, Next-n अनुकूल)]।

कोर पुस्तकालयों की स्थापना

आवश्यक पैकेज स्थापित करके शुरू करें:

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

वैकल्पिक रूप से ]i18next-browser-languagedetector को डिवाइस वरीयताओं के आधार पर स्वचालित भाषा का पता लगाने के लिए जोड़ते हैं। ध्यान दें कि आपको प्रतिक्रिया-मूल-स्थानीयकरण (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;

] का उपयोग करना प्रतिक्रियात्मक मूल स्थान डिवाइस की क्षेत्रीय सेटिंग्स का सम्मान सुनिश्चित करता है। फ़ंक्शन एक बार चलता है और प्रारंभिक भाषा निर्धारित करता है। सतत अद्यतनों के लिए (यदि उपयोगकर्ता अपनी डिवाइस भाषा बदलता है जबकि ऐप खुला है), तो आप परिवर्तन की सदस्यता ले सकते हैं।

अनुवाद फ़ाइलें संरचना

भाषा और नामस्थानों द्वारा घोंसले 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."
 }
}

नामस्थानों का उपयोग करना (उदाहरण के लिए, , ) बड़े ऐप्स का प्रबंधन करने में मदद करता है और अनुवाद के टुकड़ों के आलसी लोडिंग को सक्षम बनाता है।

घटकों में अनुवाद का उपयोग करना

उपयोगट्रांसलेशन हुक

किसी भी कार्यात्मक घटक में:

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

t] समारोह अन्तर्निहित चर और बहुवचन संभालती है। भाषा बदलने के लिए, ] - यह सभी सब्सक्राइब घटकों का एक पुनः प्रस्तुत करने को ट्रिगर करता है।

ट्रांस घटक का उपयोग करना

एम्बेडेड मार्कअप या रीएक्ट घटकों के साथ जटिल स्ट्रिंग्स के लिए:

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

 Welcome, {user}!

हैंडलिंग प्लुरल्स, लैंगर और कॉन्टेक्स्ट

i18next बॉक्स से उन्नत बहुल नियमों का समर्थन करता है। ] के साथ कुंजी परिभाषित करें।

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

उपयोग: ] स्वचालित रूप से स्थानीय लोगों के आधार पर सही रूप का चयन करता है। विकल्प के माध्यम से लैंग्वेज और अन्य संदर्भों को संभाला जा सकता है।

गतिशील भाषा स्विचिंग और स्थायित्व

उपयोगकर्ता की भाषा वरीयता को बनाए रखने के लिए, चयनित भाषा को AsyncStorage](or ]react-native-mmkv]]]) में स्टोर करें और इसे ऐप स्टार्टअप पर लोड करें। i18n कॉन्फ़िगरेशन को संशोधित करें:

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 को ] मॉड्यूल के माध्यम से समर्थन करता है। जब भाषा अरबी, हिब्रू या फारसी है, तो 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 अनुभव के लिए, और ] का उपयोग सावधानी से करें। विषय-आधारित दिशा के लिए react-native-restyle] जैसे पुस्तकालय का उपयोग करने पर विचार करें।

सर्वर से अनुवाद लोड हो रहा है (ओवर-द-एयर)

उन ऐप्स के लिए जिन्हें ऐप स्टोर अपडेट के बिना भाषा जोड़ने की आवश्यकता है, एक बैकएंड से अनुवाद JSON प्राप्त करें। React Native के लिए एक कस्टम बैकेंड के साथ i18next-http-backend का उपयोग करें:

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 में प्राप्त अनुवाद कैश करें। केवल अद्यतन फ़ाइलों को डाउनलोड करने के लिए एक संस्करणिंग तंत्र के साथ संयोजन करें।

प्रदर्शन विचार

  • ]Use namespace splitting: वर्तमान स्क्रीन के लिए केवल लोड अनुवाद। आलसी लोडिंग प्रारंभिक बंडल आकार को कम करता है।
  • ]Avoid re-renders: ] हुक पहले से ही केवल भाषा परिवर्तन के लिए सदस्यता द्वारा अनुकूलन। के साथ महंगे घटक लपेटें।
  • ]पूर्व-संगत अनुवाद फाइलें : निर्माण के दौरान, JSON को छोटा प्रारूप में बदल दें।
  • ]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]][[[[FLT:[[[[[[[[[[[[[FLT:]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]]][[[[

बहु भाषा कार्यात्मकता परीक्षण

अपने अनुवाद फ़ाइलों के लिए यूनिट परीक्षण लिखें: कोई लापता कुंजी सुनिश्चित करें, सभी प्लेसहोल्डर प्रदान किए जाते हैं, और बहुलीय सही ढंग से काम करते हैं। एक नकली i18n उदाहरण के साथ का उपयोग करें। एकीकरण परीक्षणों के लिए, भाषा स्विच का अनुकरण करें और जांचें कि घटक सही टेक्स्ट प्रदर्शित करते हैं। दोनों प्लेटफार्मों पर RTL लेआउट प्रतिपादन का परीक्षण भी करें।

सर्वश्रेष्ठ अभ्यास Recap

  • ]Always अनुवाद कुंजी का उपयोग करते हैं - कोई भी हार्डकोड उपयोगकर्ता-facing स्ट्रिंग्स नहीं।
  • Keep अनुवाद सुविधा या स्क्रीन (नामस्थान) द्वारा आयोजित किया गया।
  • Use Fallback languages यूआई को तोड़ने से अधूरे अनुवादों को रोकने के लिए।
  • ]Real उपकरणों पर टेस्ट विभिन्न स्थानीय सेटिंग्स के साथ।
  • Consider सांस्कृतिक मतभेद भाषा से परे: तारीख प्रारूपों, रंग अर्थ, छवियों।
  • ] अनुवादकों और डेवलपर्स के लिए अपने i18n वर्कफ़्लो को डोक्यूमेंट करें।

React Native में बहु भाषा समर्थन को लागू करने के लिए एक पुरस्कृत निवेश है। लाइकोपीनियों जैसे react-i18next] और react-native-localize] के साथ, आप एक मजबूत प्रणाली का निर्माण कर सकते हैं जो आपके उपयोगकर्ता आधार के साथ पैमाने पर है। आगे पढ़ने के लिए, आधिकारिक react-i18next प्रलेखन ], ]i18next कोर गाइड ] और [FLT-अपनी]]