React Native मा बहुभाषी अनुप्रयोग लेख्दै

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

Skillbox सिफारिस गर्दछ: शैक्षिक अनलाइन पाठ्यक्रम "पेशे जाभा विकासकर्ता".
हामी सम्झाउँछौं: सबै Habr पाठकहरूका लागि - Habr प्रोमो कोड प्रयोग गरी कुनै पनि Skillbox पाठ्यक्रममा भर्ना गर्दा १०,००० रूबल छुट।

उपकरण र सीपहरू

यस लेखलाई बुझ्नको लागि, तपाईंलाई प्रतिक्रिया नेटिभसँग काम गर्ने आधारभूत सीपहरू चाहिन्छ। काम गर्ने मेसिनको सेटिङहरूसँग आफूलाई परिचित गर्न, तपाईं सक्नुहुन्छ आधिकारिक निर्देशनहरू प्रयोग गर्नुहोस्.

हामीलाई सफ्टवेयर उपकरणहरूको यी संस्करणहरू चाहिन्छ:

• नोड v10.15.0
• npm 6.4.1
• धागो 1.16.0
• प्रतिक्रिया-स्थानीय ०.५९.९
• प्रतिक्रिया-स्थानीय-स्थानीयकरण 1.1.3
• i18n-js 3.3.0

सुरु गर्दै

हामी एउटा अनुप्रयोग सिर्जना गर्नेछौं जसले अंग्रेजी, फ्रेन्च र अरबीलाई समर्थन गर्नेछ। पहिले हामी react-native-cli प्रयोग गरेर नयाँ प्रोजेक्ट बनाउँछौं। यो गर्नको लागि, तपाईंले टर्मिनलमा यो टाइप गर्न आवश्यक छ:

$ react-native init multiLanguage
$ cd बहुभाषा

आवश्यक पुस्तकालयहरू थप्दै

पहिलो चरण निम्न टाइप गरेर react-native-localize स्थापना गर्नु हो:
$ yarn react-native-localize थप्नुहोस्

यदि स्थापना प्रक्रियाको क्रममा समस्याहरू देखा पर्छन्, यो स्थापना पुस्तिका पढ्न लायक छ.

प्रतिक्रिया-स्थानीय-स्थानीय पुस्तकालयले विकासकर्तालाई बहुभाषी सुविधाहरूमा पहुँच दिन्छ। तर उनलाई अर्को पुस्तकालय चाहिन्छ - i18n।

यो लेख प्रयोग वर्णन गर्दछ I18n.js जाभास्क्रिप्ट मा अनुवाद प्रदान गर्न को लागी।

$ यार्न i18n-js थप्नुहोस्

ठीक छ, किनकि i18n-js ले क्यासिङ वा मेमोइजेशन प्रदान गर्दैन, म यसको लागि lodash.memoize प्रयोग गर्न सुझाव दिन्छु:

$ यार्न lodash.memoize थप्नुहोस्

अनुवाद संग काम

अनुप्रयोगले अन्य भाषाहरूसँग काम गर्न सक्षम हुनको लागि, तपाईंले पहिले src भित्र अनुवाद डाइरेक्टरी सिर्जना गर्न आवश्यक छ, त्यसपछि प्रत्येक भाषाको लागि तीन JSON फाइलहरू।

1. अंग्रेजी को लागी en.json;

2. फ्रान्सेली लागि fr.json;

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

ठिक छ, अब एप क्लासको कम्पोनेन्ट सिर्जना गरौं:

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(), प्रारम्भिक कन्फिगरेसन सेट गर्दछ।

त्यसोभए तपाईंले componentDidMount() मा घटना श्रोता थप्न आवश्यक छ, यो तत्वले अद्यावधिकहरूको लागि सुन्न र तिनीहरू हुँदा handleLocalizationChange() लाई कल गर्नेछ।

handleLocalizationChange() विधिले setI18nConfig() र forceUpdate() सक्रिय गर्छ। यो एन्ड्रोइड उपकरणहरूको लागि आवश्यक छ किनकि परिवर्तनहरू ध्यान दिनको लागि घटक रेन्डर हुनुपर्छ।

त्यसपछि तपाईंले componentWillUnmount() विधिबाट सुन्न हटाउन आवश्यक छ।

अन्तमा, render() translate() को प्रयोग गरेर र यसमा कुञ्जी प्यारामिटर थपेर नमस्कार फर्काउँछ। यी चरणहरू पछि, अनुप्रयोगले कुन भाषा आवश्यक छ "बुझ्न" र यसमा सन्देशहरू प्रदर्शन गर्न सक्षम हुनेछ।

आवेदन प्रक्षेपण

अब अनुवाद कसरी काम गर्छ जाँच गर्ने समय हो।

पहिले, हामी टाइप गरेर सिम्युलेटर वा इमुलेटरमा अनुप्रयोग सुरु गर्छौं

$ react-native run-ios
$ प्रतिक्रिया-नेटिभ रन-एन्ड्रोइड

यो केहि यस्तो देखिनेछ:

अब तपाइँ एप्लिकेसन लन्च गरेर भाषालाई फ्रेन्चमा परिवर्तन गर्ने प्रयास गर्न सक्नुहुन्छ।

हामी अरबी संग समान कुरा गर्छौं, कुनै फरक छैन।

अहिलेसम्म धेरै राम्रो।

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

यो पत्ता लगाउँछ कि FindBestLanguage को कार्य सबै उपलब्धहरूबाट इष्टतम अनुवाद प्रदान गर्नु हो। नतिजाको रूपमा, पूर्वनिर्धारित भाषा प्रदर्शित हुनेछ।

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

यदि चयन गरिएको भाषा रुचाइएको भाषा होइन भने, FindBestAvailableLanguage ले अपरिभाषित फर्काउँछ ताकि पूर्वनिर्धारित भाषा देखाइन्छ।

बोनस

react-native-localize सँग एउटा API छ जसले भाषा तत्वहरूको ठूलो संख्यामा पहुँच प्रदान गर्दछ। काम सुरु गर्नु अघि, यो कागजात बाहिर जाँच गर्न लायक छ.

निष्कर्ष

आवेदन कुनै पनि समस्या बिना बहुभाषी बनाउन सकिन्छ। React-native-localize एउटा उत्कृष्ट विकल्प हो जसले तपाईंलाई आफ्नो एपको प्रयोगकर्ता आधार विस्तार गर्न अनुमति दिन्छ।

परियोजना स्रोत कोड यहाँ छ.

Skillbox सिफारिस गर्दछ:

• दुई वर्षे व्यावहारिक पाठ्यक्रम "म एक प्रो वेब विकासकर्ता हुँ".
• अनलाइन कोर्स "स्क्र्याचबाट C# विकासकर्ता".
• एक वर्षको व्यावहारिक पाठ्यक्रम "0 देखि PRO मा PHP विकासकर्ता".

स्रोत: www.habr.com