రియాక్ట్ నేటివ్‌లో బహుభాషా అప్లికేషన్‌ను వ్రాయడం

కొత్త దేశాలు మరియు ప్రాంతాలను అన్వేషించే అంతర్జాతీయ కంపెనీలకు ఉత్పత్తి స్థానికీకరణ చాలా ముఖ్యమైనది. అదేవిధంగా, మొబైల్ అప్లికేషన్‌లకు స్థానికీకరణ అవసరం. డెవలపర్ అంతర్జాతీయ విస్తరణను ప్రారంభించినట్లయితే, మరొక దేశానికి చెందిన వినియోగదారులకు వారి మాతృభాషలో ఇంటర్‌ఫేస్‌తో పని చేసే అవకాశాన్ని ఇవ్వడం ముఖ్యం. ఈ కథనంలో, మేము ప్యాకేజీని ఉపయోగించి రియాక్ట్ నేటివ్ అప్లికేషన్‌ను సృష్టిస్తాము ప్రతిస్పందించు-స్థానిక-స్థానికీకరించు.

Skillbox సిఫార్సు చేస్తోంది: ఎడ్యుకేషనల్ ఆన్‌లైన్ కోర్సు "వృత్తి జావా డెవలపర్".
మేము గుర్తు చేస్తున్నాము: Habr పాఠకులందరికీ - Habr ప్రోమో కోడ్‌ని ఉపయోగించి ఏదైనా Skillbox కోర్సులో నమోదు చేసుకున్నప్పుడు 10 రూబుల్ తగ్గింపు.

సాధనాలు మరియు నైపుణ్యాలు

ఈ కథనాన్ని అర్థం చేసుకోవడానికి, రియాక్ట్ నేటివ్‌తో పని చేయడంలో మీకు ప్రాథమిక నైపుణ్యాలు అవసరం. పని చేసే యంత్రం యొక్క సెట్టింగులతో మిమ్మల్ని పరిచయం చేసుకోవడానికి, మీరు చేయవచ్చు అధికారిక సూచనలను ఉపయోగించండి.

మాకు ఈ సాఫ్ట్‌వేర్ సాధనాల సంస్కరణలు అవసరం:

• నోడ్ v10.15.0
• npm 6.4.1
• నూలు 1.16.0
• రియాక్ట్-నేటివ్ 0.59.9
• రియాక్ట్-స్థానిక-స్థానికీకరణ 1.1.3
• i18n-js 3.3.0

ప్రారంభించడం

మేము ఇంగ్లీష్, ఫ్రెంచ్ మరియు అరబిక్‌లకు మద్దతు ఇచ్చే అప్లికేషన్‌ను సృష్టిస్తాము. ముందుగా మేము react-native-cliని ఉపయోగించి కొత్త ప్రాజెక్ట్‌ని సృష్టిస్తాము. దీన్ని చేయడానికి, మీరు దీన్ని టెర్మినల్‌లో టైప్ చేయాలి:

$ రియాక్ట్-నేటివ్ init బహుభాష
$ cd బహుభాష

అవసరమైన లైబ్రరీలను జోడిస్తోంది

కింది వాటిని టైప్ చేయడం ద్వారా రియాక్ట్-నేటివ్-లోకలైజ్‌ని ఇన్‌స్టాల్ చేయడం మొదటి దశ:
$ నూలు యాడ్ రియాక్ట్-నేటివ్-లోకలైజ్

ఇన్‌స్టాలేషన్ ప్రక్రియలో సమస్యలు తలెత్తితే, ఇన్‌స్టాలేషన్ మాన్యువల్‌ను చదవడం విలువ.

రియాక్ట్-నేటివ్-లోకలైజ్ లైబ్రరీ డెవలపర్‌కు బహుభాషా ఫీచర్‌లకు యాక్సెస్‌ని ఇస్తుంది. కానీ ఆమెకు మరో లైబ్రరీ కావాలి - i18n.

ఈ వ్యాసం ఉపయోగం గురించి వివరిస్తుంది I18n.js జావాస్క్రిప్ట్‌లోకి అనువాదాన్ని అందించడానికి.

$ నూలు i18n-jsని జోడించండి

సరే, i18n-js కాషింగ్ లేదా మెమోయిజేషన్‌ను అందించదు కాబట్టి, దీని కోసం lodash.memoize ఉపయోగించమని నేను సూచిస్తున్నాను:

$ నూలు lodash.memoize జోడించండి

అనువాదాలతో పని చేస్తోంది

అప్లికేషన్ ఇతర భాషలతో పని చేయగలిగేలా చేయడానికి, మీరు మొదట src లోపల అనువాద డైరెక్టరీని సృష్టించాలి, ఆపై ప్రతి భాషకు మూడు JSON ఫైల్‌లు ఉండాలి.

1. ఇంగ్లీష్ కోసం en.json;

2. ఫ్రెంచ్ కోసం fr.json;

3. అరబిక్ కోసం ar.json.

ఈ ఫైల్‌లు కీలు మరియు విలువలతో కూడిన JSON ఆబ్జెక్ట్‌లను కలిగి ఉంటాయి. ప్రతి భాషకు కీ ఒకే విధంగా ఉంటుంది. ఇది టెక్స్ట్ సమాచారాన్ని ప్రదర్శించడానికి అప్లికేషన్ ద్వారా ఉపయోగించబడుతుంది.

విలువ అనేది వినియోగదారుకు చూపవలసిన వచనం.

ఆంగ్ల:

{"హలో": "హలో వరల్డ్!"}

ఫ్రెంచ్

{"hello": "Salut le Monde!"}

Арабский

{ "హలో": "أهلاً بالعالم"}

మీరు అదే విధంగా ఇతర భాషలను జోడించవచ్చు.

ప్రధాన కోడ్

ఈ సమయంలో, మీరు 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() పద్ధతి setI18nConfig() మరియు forceUpdate()ని సక్రియం చేస్తుంది. మార్పులు గుర్తించదగినవి కావాలంటే కాంపోనెంట్ తప్పనిసరిగా రెండర్ చేయబడాలి కాబట్టి ఇది Android పరికరాలకు అవసరం.

అప్పుడు మీరు కాంపోనెంట్‌విల్‌అన్‌మౌంట్() పద్ధతి నుండి వినడాన్ని తీసివేయాలి.

చివరగా, అనువాదం()ని ఉపయోగించి మరియు దానికి కీ పరామితిని జోడించడం ద్వారా render() helloని అందిస్తుంది. ఈ దశల తర్వాత, అప్లికేషన్ ఏ భాష అవసరమో "అర్థం" చేసుకోగలదు మరియు దానిలో సందేశాలను ప్రదర్శించగలదు.

అప్లికేషన్ లాంచ్

అనువాదం ఎలా పని చేస్తుందో తనిఖీ చేయడానికి ఇప్పుడు సమయం ఆసన్నమైంది.

ముందుగా, మేము టైప్ చేయడం ద్వారా అనువర్తనాన్ని అనుకరణ లేదా ఎమ్యులేటర్‌లో ప్రారంభిస్తాము

$ రియాక్ట్-నేటివ్ రన్-ఐఓఎస్
$ రియాక్ట్-నేటివ్ రన్-ఆండ్రాయిడ్

ఇది ఇలా కనిపిస్తుంది:

ఇప్పుడు మీరు అప్లికేషన్‌ను ప్రారంభించడం ద్వారా భాషను ఫ్రెంచ్‌కి మార్చడానికి ప్రయత్నించవచ్చు.

మేము అరబిక్‌తో అదే పని చేస్తాము, తేడా లేదు.

ఇంతవరకు అంతా బాగనే ఉంది.

అప్లికేషన్‌లో అనువాదం లేని యాదృచ్ఛిక భాషను మీరు ఎంచుకుంటే ఏమి జరుగుతుంది?

అందుబాటులో ఉన్న అన్ని వాటి నుండి సరైన అనువాదాన్ని అందించడమే findBestLanguage యొక్క పని అని తేలింది. ఫలితంగా, డిఫాల్ట్ భాష ప్రదర్శించబడుతుంది.

మేము ఫోన్ సెట్టింగ్‌ల గురించి మాట్లాడుతున్నాము. ఉదాహరణకు, iOS ఎమ్యులేటర్‌లో మీరు భాషల క్రమాన్ని చూడవచ్చు.

ఎంచుకున్న భాష ప్రాధాన్య భాష కాకపోతే, findBestAvailableLanguage నిర్వచించబడకుండా తిరిగి వస్తుంది, తద్వారా డిఫాల్ట్ భాష చూపబడుతుంది.

బోనస్

react-native-localize పెద్ద సంఖ్యలో భాషా మూలకాలకు ప్రాప్యతను అందించే APIని కలిగి ఉంది. మీరు పని ప్రారంభించే ముందు, డాక్యుమెంటేషన్‌ను పరిశీలించడం విలువ.

కనుగొన్న

అప్లికేషన్ ఎటువంటి సమస్యలు లేకుండా బహుభాషా చేయవచ్చు. React-native-localize అనేది మీ యాప్ యొక్క వినియోగదారు స్థావరాన్ని విస్తరించుకోవడానికి మిమ్మల్ని అనుమతించే గొప్ప ఎంపిక.

ప్రాజెక్ట్ సోర్స్ కోడ్ ఇక్కడ.

Skillbox సిఫార్సు చేస్తోంది:

• రెండేళ్ల ప్రాక్టికల్ కోర్సు "నేను PRO వెబ్ డెవలపర్‌ని".
• ఆన్‌లైన్ కోర్సు "మొదటి నుండి C# డెవలపర్".
• ప్రాక్టికల్ ఒక సంవత్సరం కోర్సు "0 నుండి PRO వరకు PHP డెవలపర్".

మూలం: www.habr.com