प्रतिक्रिया मूल पर एक बहुभाषी अनुप्रयोग लिखना

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

स्किलबॉक्स अनुशंसा करता है: ऑन-लाइन शैक्षिक पाठ्यक्रम "पेशे जावा-डेवलपर" ।
हम आपको याद दिलाते हैं: "हैबर" के सभी पाठकों के लिए - "हैबर" प्रोमो कोड का उपयोग करके किसी भी स्किलबॉक्स कोर्स के लिए पंजीकरण करते समय 10,000 रूबल की छूट।

उपकरण और कौशल

इस लेख को समझने के लिए, आपको मूल प्रतिक्रिया मूल कौशल की आवश्यकता है। कामकाजी मशीन की सेटिंग्स के साथ खुद को परिचित करने के लिए, आप आधिकारिक निर्देशों का उपयोग कर सकते हैं ।

हमें सॉफ्टवेयर टूल के इन संस्करणों की आवश्यकता है:

• नोड v10.15.0
• एनपीएम 6.4.1
• यार्न 1.16.0
• प्रतिक्रिया-देशी 0.59.9
• प्रतिक्रिया-मूल-स्थानीयकरण 1.1.3
• i18n-js 3.3.0

शुरुआत हो रही है

हम एक एप्लिकेशन बनाएंगे जो अंग्रेजी, फ्रेंच और अरबी का समर्थन करेगा। सबसे पहले, प्रतिक्रिया-मूल-क्ली का उपयोग करके एक नया प्रोजेक्ट बनाएं। ऐसा करने के लिए, टर्मिनल में आपको यह टाइप करना होगा:

$ प्रतिक्रिया देशी init बहुभाषी
$ cd बहुभाषी

आवश्यक लाइब्रेरी जोड़ें

पहला कदम निम्नलिखित टाइप करके प्रतिक्रिया-देशी-स्थानीयकरण स्थापित करना है:
$ यार्न प्रतिक्रिया-देशी-स्थानीयकरण जोड़ते हैं

यदि स्थापना प्रक्रिया के दौरान समस्याएं उत्पन्न होती हैं, तो आपको स्थापना मैनुअल का अध्ययन करना चाहिए ।

प्रतिक्रिया-देशी-स्थानीयकृत पुस्तकालय डेवलपर को बहुभाषी कार्यों तक पहुंच प्रदान करता है। लेकिन उसे एक और लाइब्रेरी चाहिए - i18n।

यह लेख जावास्क्रिप्ट अनुवाद प्रदान करने के लिए I18n.js के उपयोग का वर्णन करता है।

$ यार्न i18n-js जोड़ते हैं

खैर, चूंकि i18n-js कैशिंग या मेमॉइज़ेशन प्रदान नहीं करता है, इसलिए मैं इसके लिए lodash.memoize का उपयोग करने का सुझाव देता हूं:

$ यार्न addash.memoize जोड़ें

अनुवाद के साथ काम करें

अन्य भाषाओं के साथ कुशलता से काम करने के लिए आवेदन के लिए, आपको पहले src के अंदर अनुवाद निर्देशिका बनाने की आवश्यकता है, फिर प्रत्येक भाषाओं के लिए तीन JSON फ़ाइलें।

1. en.json for English;

2. fr.json for French;

3. अरबी के लिए ar.json।

इन फ़ाइलों में कुंजियाँ और मान के साथ JSON ऑब्जेक्ट हैं। कुंजी प्रत्येक भाषा के लिए समान होगी। इसका उपयोग एप्लिकेशन द्वारा टेक्स्ट सूचना प्रदर्शित करने के लिए किया जाता है।

मान उपयोगकर्ता को दिखाया जाने वाला पाठ है।

अंग्रेजी भाषा:

{"हैलो": "हैलो वर्ल्ड!"}

फ्रेंच

{"हैलो": "सालुत ले मोंडे!"}

अरबी भाषा

{"हैलो": ""هلا Hello بالعالم"}

अन्य भाषाओं को भी इसी तरह से जोड़ा जा सकता है।

मुख्य कोड

इस बिंदु पर, आपको App.js फ़ाइल खोलने और इसे आयात करने की आवश्यकता है:

import React from "react"; import * as RNLocalize from "react-native-localize"; import i18n from "i18n-js"; import memoize from "lodash.memoize"; // Use for caching/memoize for better performance import { I18nManager, SafeAreaView, ScrollView, StyleSheet, Text, View } from "react-native"; 

उसके बाद, सहायक कार्यों और स्थिरांक को जोड़ा जाता है, जो बाद में उपयोगी होते हैं।

 const translationGetters = { // lazy requires (metro bundler does not support symlinks) ar: () => require("./src/translations/ar.json"), en: () => require("./src/translations/en.json"), fr: () => require("./src/translations/fr.json") }; const translate = memoize( (key, config) => i18n.t(key, config), (key, config) => (config ? key + JSON.stringify(config) : key) ); const setI18nConfig = () => { // fallback if no available language fits const fallback = { languageTag: "en", isRTL: false }; const { languageTag, isRTL } = RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) || fallback; // clear translation cache translate.cache.clear(); // update layout direction I18nManager.forceRTL(isRTL); // set i18n-js config i18n.translations = { [languageTag]: translationGetters[languageTag]() }; i18n.locale = languageTag; }; 

ठीक है, अब चलिए App वर्ग का एक घटक बनाते हैं:

 export default class App extends React.Component { constructor(props) { super(props); setI18nConfig(); // set initial config } componentDidMount() { RNLocalize.addEventListener("change", this.handleLocalizationChange); } componentWillUnmount() { RNLocalize.removeEventListener("change", this.handleLocalizationChange); } handleLocalizationChange = () => { setI18nConfig(); this.forceUpdate(); }; render() { return ( <SafeAreaView style={styles.safeArea}> <Text style={styles.value}>{translate("hello")}</Text> </SafeAreaView> ); } } const styles = StyleSheet.create({ safeArea: { backgroundColor: "white", flex: 1, alignItems: "center", justifyContent: "center" }, value: { fontSize: 18 } }); 

पहला तत्व - setI18nConfig () - प्रारंभिक कॉन्फ़िगरेशन सेट करता है।

फिर आपको ईवेंट श्रोता को कंपोनेंटडाउंट () में जोड़ने की आवश्यकता है, यह तत्व अपडेट होने और कॉल हैंडल करने की विधि को ट्रैक करेगा () यदि वे होते हैं तो ()।

हैंडललोकलाइज़ेशनचेंज () विधि setI18nConfig () और forceUpdate () को सक्रिय करती है। एंड्रॉइड डिवाइस के लिए यह आवश्यक है, क्योंकि घटक को प्रदान किया जाना चाहिए ताकि परिवर्तन ध्यान देने योग्य हो जाएं।

तब आपको घटक से सुनने की जरूरत हैWillUnmount () विधि।

अंत में, अनुवाद () का उपयोग करके और इसके लिए मुख्य पैरामीटर को जोड़कर हैलो को रेंडर () में लौटा दिया जाता है। इन क्रियाओं के बाद, एप्लिकेशन को "समझने" में सक्षम होगा कि किस भाषा की आवश्यकता है, और उस पर संदेश प्रदर्शित करें।

एप्लिकेशन लॉन्च

अब यह जांचने का समय है कि अनुवाद कैसे काम करता है।

सबसे पहले, एक सिम्युलेटर या एमुलेटर में एप्लिकेशन को टाइप करें

$ प्रतिक्रिया-देशी रन-आईओएस
$ प्रतिक्रिया-देशी रन-एंड्रॉइड

यह कुछ इस तरह दिखेगा:



अब आप भाषा को फ्रेंच में बदलने की कोशिश कर सकते हैं, फिर एप्लिकेशन लॉन्च कर सकते हैं।



हम अरबी भाषा के साथ भी ऐसा ही करते हैं, कोई अंतर नहीं है।

अब तक, इतना अच्छा।

लेकिन क्या होगा यदि आप एक यादृच्छिक भाषा का चयन करते हैं जिसका अनुवाद अनुप्रयोग में नहीं है?

यह पता चला है कि findBestLanguage का कार्य सभी उपलब्ध का इष्टतम अनुवाद प्रदान करना है। परिणामस्वरूप, डिफ़ॉल्ट भाषा प्रदर्शित होगी।

यह फोन सेटिंग्स के बारे में है। इसलिए, उदाहरण के लिए, आईओएस एमुलेटर में, आप भाषाओं का क्रम देख सकते हैं।



यदि चयनित भाषा पसंद नहीं की जाती है, तो findBestAvailableLanguage अपरिभाषित रिटर्न देता है, ताकि डिफ़ॉल्ट भाषा प्रदर्शित हो।

बोनस

रिएक्ट-देशी-स्थानीयकरण में एक एपीआई है जो बड़ी संख्या में भाषा तत्वों तक पहुंच प्रदान करता है। शुरू करने से पहले, आपको दस्तावेज के साथ खुद को परिचित करना चाहिए ।

निष्कर्ष

आवेदन को बिना किसी समस्या के बहुभाषी बनाया जा सकता है। प्रतिक्रिया-देशी-स्थानीयकरण एक शानदार विकल्प है जो आपको एप्लिकेशन के उपयोगकर्ताओं के सर्कल का विस्तार करने की अनुमति देता है।

परियोजना का स्रोत कोड यहाँ है ।

स्किलबॉक्स अनुशंसा करता है:

• दो वर्षीय व्यावहारिक पाठ्यक्रम "मैं एक प्रो वेब डेवलपर हूं । "
• ऑनलाइन पाठ्यक्रम "सी # खरोंच से डेवलपर । "
• व्यावहारिक वार्षिक पाठ्यक्रम "पीएचपी-डेवलपर 0 से प्रो तक" ।