रिएक्ट नेटिव में एक बहुभाषी एप्लिकेशन लिखना

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

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

उपकरण और कौशल

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

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

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

शुरू

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

$ प्रतिक्रिया-मूल init मल्टीलैंग्वेज
$ सीडी मल्टीलैंग्वेज

आवश्यक पुस्तकालय जोड़ना

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

यदि स्थापना प्रक्रिया के दौरान समस्याएँ आती हैं, यह इंस्टॉलेशन मैनुअल पढ़ने लायक है.

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

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

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

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

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

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

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

1. अंग्रेजी के लिए en.json;

2. फ़्रेंच के लिए fr.json;

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

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

वैल्यू वह टेक्स्ट है जिसे उपयोगकर्ता को दिखाया जाना आवश्यक है।

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

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

Французский

{"हैलो": "सैल्यूट ले मोंडे!"}

Арабский

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

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

मुख्य कोड

इस बिंदु पर, आपको 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;
};

खैर, अब ऐप क्लास का एक घटक बनाते हैं:

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() को सक्रिय करती है। एंड्रॉइड डिवाइसों के लिए यह आवश्यक है क्योंकि परिवर्तनों को ध्यान देने योग्य बनाने के लिए घटक को प्रस्तुत किया जाना चाहिए।

फिर आपको कंपोनेंटविलअनमाउंट() विधि से श्रवण को हटाने की आवश्यकता है।

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

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

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

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

$ प्रतिक्रिया-मूल रन-आईओएस
$ प्रतिक्रिया-मूल रन-एंड्रॉइड

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

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

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

अब तक तो सब ठीक है।

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

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

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

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

बोनस

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

निष्कर्ष

एप्लिकेशन को बिना किसी समस्या के बहुभाषी बनाया जा सकता है। रिएक्ट-नेटिव-लोकलाइज़ एक बेहतरीन विकल्प है जो आपको अपने ऐप के उपयोगकर्ता आधार का विस्तार करने की अनुमति देता है।

प्रोजेक्ट स्रोत कोड यहाँ स्थित है.

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

• दो वर्षीय व्यावहारिक पाठ्यक्रम "मैं एक PRO वेब डेवलपर हूं".
• ऑनलाइन पाठ्यक्रम "शुरुआत से सी# डेवलपर".
• व्यावहारिक वर्ष पाठ्यक्रम "PHP डेवलपर 0 से PRO तक".

स्रोत: www.habr.com