🥇आम्ही रिएक्ट नेटिव्ह | मध्ये एक बहुभाषिक अनुप्रयोग लिहित आहोत प्रोहोस्टर

नवीन देश आणि प्रदेशांचा शोध घेणाऱ्या आंतरराष्ट्रीय कंपन्यांसाठी उत्पादन स्थानिकीकरण खूप महत्वाचे आहे. त्याचप्रमाणे मोबाईल ऍप्लिकेशनसाठी स्थानिकीकरण आवश्यक आहे. विकासकाने आंतरराष्ट्रीय विस्तार सुरू केल्यास, दुसऱ्या देशातील वापरकर्त्यांना त्यांच्या मूळ भाषेत इंटरफेससह काम करण्याची संधी देणे महत्त्वाचे आहे. या लेखात, आम्ही पॅकेज वापरून रिअॅक्ट नेटिव्ह अॅप्लिकेशन तयार करू प्रतिक्रिया-नेटिव्ह-स्थानिकीकरण.

स्किलबॉक्स शिफारस करतो: शैक्षणिक ऑनलाइन अभ्यासक्रम "प्रोफेशन जावा डेव्हलपर".
आम्ही आठवण करून देतो: सर्व Habr वाचकांसाठी - Habr प्रोमो कोड वापरून कोणत्याही स्किलबॉक्स कोर्समध्ये नावनोंदणी करताना 10 रूबल सवलत.

साधने आणि कौशल्ये

हा लेख समजून घेण्यासाठी, तुम्हाला React Native सह काम करण्यासाठी मूलभूत कौशल्ये आवश्यक आहेत. कार्यरत मशीनच्या सेटिंग्जसह स्वत: ला परिचित करण्यासाठी, आपण हे करू शकता अधिकृत सूचना वापरा.

आम्हाला सॉफ्टवेअर टूल्सच्या या आवृत्त्यांची आवश्यकता असेल:

नोड v10.15.0
npm 6.4.1
सूत 1.16.0
प्रतिक्रिया-नेटिव्ह 0.59.9
प्रतिक्रिया-मूळ-स्थानिकीकरण 1.1.3
i18n-js 3.3.0

प्रारंभ करणे

आम्ही एक ऍप्लिकेशन तयार करू जो इंग्रजी, फ्रेंच आणि अरेबिकला सपोर्ट करेल. प्रथम आपण react-native-cli वापरून नवीन प्रोजेक्ट तयार करतो. हे करण्यासाठी, तुम्हाला टर्मिनलमध्ये हे टाइप करणे आवश्यक आहे:

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

आवश्यक लायब्ररी जोडणे

खालील टाईप करून react-native-localize स्थापित करणे ही पहिली पायरी आहे:
$ yarn add react-native-localize

स्थापना प्रक्रियेदरम्यान समस्या उद्भवल्यास, इंस्टॉलेशन मॅन्युअल वाचण्यासारखे आहे.

रिअॅक्ट-नेटिव्ह-लोकलाइझ लायब्ररी विकसकाला बहुभाषिक वैशिष्ट्यांमध्ये प्रवेश देते. पण तिला आणखी एका लायब्ररीची गरज आहे - i18n.

हा लेख वापराचे वर्णन करतो I18n.js JavaScript मध्ये अनुवाद प्रदान करण्यासाठी.

$ सूत i18n-js जोडा

बरं, i18n-js कॅशिंग किंवा मेमोलायझेशन प्रदान करत नसल्यामुळे, मी यासाठी lodash.memoize वापरण्याचा सल्ला देतो:

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

भाषांतरांसह कार्य करणे

अनुप्रयोग इतर भाषांसह कार्य करण्यास सक्षम होण्यासाठी, तुम्हाला प्रथम src मध्ये अनुवाद निर्देशिका तयार करणे आवश्यक आहे, नंतर प्रत्येक भाषेसाठी तीन JSON फाइल्स.

1. इंग्रजीसाठी en.json;

2. फ्रेंचसाठी fr.json;

3. अरबी साठी ar.json.

या फायलींमध्ये की आणि मूल्यांसह JSON ऑब्जेक्ट असतात. की प्रत्येक भाषेसाठी समान असेल. ते मजकूर माहिती प्रदर्शित करण्यासाठी अनुप्रयोगाद्वारे वापरले जाते.

मूल्य हा मजकूर आहे जो वापरकर्त्याला दर्शविणे आवश्यक आहे.

इंग्रजी भाषा:

{"hello": "Hello World!"}

फ्रान्सिश

{"हॅलो": "सॅलट ले मोंडे!"}

ऍराबिक

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

आपण त्याच प्रकारे इतर भाषा जोडू शकता.

मुख्य कोड

या टप्प्यावर, तुम्हाला 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() सक्रिय करते. हे Android डिव्हाइसेससाठी आवश्यक आहे कारण बदल लक्षात येण्यासाठी घटक रेंडर करणे आवश्यक आहे.

मग तुम्हाला componentWillUnmount() पद्धतीमधून ऐकणे काढून टाकावे लागेल.

शेवटी, render() translate() वापरून आणि त्यात एक की पॅरामीटर जोडून हॅलो परत करते. या चरणांनंतर, अनुप्रयोग कोणती भाषा आवश्यक आहे हे "समजून घेण्यास" आणि त्यामध्ये संदेश प्रदर्शित करण्यास सक्षम असेल.

अनुप्रयोग लाँच

भाषांतर कसे चालते ते तपासण्याची हीच वेळ आहे.

प्रथम, आम्ही टाइप करून सिम्युलेटर किंवा इम्युलेटरमध्ये अनुप्रयोग लाँच करतो

$ react-native run-ios
$ react-native run-android

हे असे काहीतरी दिसेल:

आता तुम्ही अनुप्रयोग लाँच करून भाषा फ्रेंचमध्ये बदलण्याचा प्रयत्न करू शकता.

आम्ही अरबी बरोबरच करतो, त्यात काही फरक नाही.

अजून तरी छान आहे.

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

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

आम्ही फोन सेटिंग्जबद्दल बोलत आहोत. उदाहरणार्थ, iOS एमुलेटरमध्ये आपण भाषांचा क्रम पाहू शकता.

निवडलेली भाषा पसंतीची भाषा नसल्यास, FindBestAvailableLanguage अपरिभाषित परत येते जेणेकरून डीफॉल्ट भाषा दर्शविली जाईल.

बोनस

react-native-localize मध्ये एक API आहे जे मोठ्या संख्येने भाषा घटकांमध्ये प्रवेश प्रदान करते. आपण काम सुरू करण्यापूर्वी, कागदपत्रे तपासणे योग्य आहे.

निष्कर्ष

कोणत्याही समस्यांशिवाय अनुप्रयोग बहुभाषिक केला जाऊ शकतो. React-native-localize हा एक उत्तम पर्याय आहे जो तुम्हाला तुमच्या अॅपचा वापरकर्ता आधार वाढवण्याची परवानगी देतो.

प्रकल्प स्त्रोत कोड येथे आहे.

स्किलबॉक्स शिफारस करतो:

दोन वर्षांचा प्रॅक्टिकल कोर्स "मी प्रो वेब डेव्हलपर आहे".

ऑनलाईन कोर्स "स्क्रॅचमधून C# विकसक".

एक वर्षाचा प्रॅक्टिकल कोर्स "PHP विकसक 0 ते PRO".

स्त्रोत: www.habr.com

React Native मध्ये बहुभाषिक अनुप्रयोग लिहिणे