🥇Sibhala isicelo seelwimi ezininzi kwiReact Native

Imveliso yasekhaya ibaluleke kakhulu kwiinkampani zamazwe ngamazwe ezihlola amazwe amatsha kunye nemimandla. Ngokufanayo, usetyenziso lwasekhaya luyafuneka kwizicelo eziphathwayo. Ukuba umphuhlisi uqala ukwanda kwamazwe ngamazwe, kubalulekile ukunika abasebenzisi abasuka kwelinye ilizwe ithuba lokusebenza kunye nojongano ngolwimi lwabo lwenkobe. Kweli nqaku, siya kwenza isicelo seReact Native usebenzisa iphakheji phendula-imveli-yasekuhlaleni.

I-Skillbox iyacebisa: Isifundo esikwi-intanethi "UmSebenzi weJava woMsebenzi".
Siyakhumbuza: kubo bonke abafundi be "Habr" - isaphulelo se-ruble ye-10 xa ubhalisa kuyo nayiphi na ikhosi ye-Skillbox usebenzisa ikhowudi yokuphromotha "Habr".

Izixhobo kunye nezakhono

Ukuqonda eli nqaku, udinga izakhono ezisisiseko ekusebenzeni neReact Native. Ukuziqhelanisa nezicwangciso zomatshini osebenzayo, unako sebenzisa imiyalelo esemthethweni.

Siza kufuna ezi nguqulelo zezixhobo zesoftware:

I-Node v10.15.0
npm 6.4.1
umsonto 1.16.0
i-react-native 0.59.9
phendula-imveli-yasekuhlaleni 1.1.3
i18n-js 3.3.0

Qala

Siza kwenza isicelo esiza kuxhasa isiNgesi, isiFrentshi kunye nesiArabhu. Okokuqala sidala iprojekthi entsha usebenzisa i-react-native-cli. Ukwenza oku, kufuneka uchwetheze oku kwi-terminal:

$ react-native init multiLanguage
$ cd Iilwimi ezininzi

Ukongeza amathala eencwadi ayimfuneko

Inyathelo lokuqala kukufaka i-react-native-localize ngokuchwetheza oku kulandelayo:
$ yarn yongeza i-react-native-localize

Ukuba kukho iingxaki ngexesha lofakelo, Kufanelekile ukufunda incwadi yokufakela.

Ilayibrari ye-react-native-localize inika umphuhlisi ukufikelela kwiimpawu zeelwimi ezininzi. Kodwa ufuna ithala leencwadi elinye ngaphezulu - i-i18n.

Eli nqaku lichaza ukusetyenziswa I18n.js ukuze unikeze inguqulelo kwiJavaScript.

$ yarn yongeza i18n-js

Ewe, kuba i-i18n-js ingaboneleli nge-caching okanye imemori, ndicebisa ukusebenzisa i-lodash.memoize kule nto:

$ yarn yongeza lodash.memoize

Ukusebenza ngeenguqulelo

Ukuze usetyenziso lukwazi ukusebenza nezinye iilwimi, kufuneka kuqala wenze uguqulelo lwefayile ngaphakathi kwe-src, emva koko iifayile ze-JSON ezintathu kulwimi ngalunye.

1. en.json yesiNgesi;

2. fr.json yesiFrentshi;

3. ar.json yesiArabhu.

Ezi fayile ziqulethe izinto ze-JSON ezinamaqhosha kunye namaxabiso. Isitshixo siya kufana kulwimi ngalunye. Isetyenziswa sisicelo ukubonisa ulwazi lokubhaliweyo.

Ixabiso sisicatshulwa esifuna ukuboniswa kumsebenzisi.

IsiNgesi:

{"molo": "Molo Lizwe!"}

IsiFrentshi

{"molo": "Molweni Monde!"}

Арабский

{ "molo": "أهلاً بالعالم"}

Unokongeza ezinye iilwimi ngendlela efanayo.

Ikhowudi ephambili

Kweli nqanaba, kufuneka uvule ifayile ye-App.js kwaye wongeze ukungenisa kuyo:

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

Emva koko, imisebenzi encedisayo kunye nee-constants zongezwa eziya kuba luncedo kamva.

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

Ewe, ngoku masenze icandelo leklasi ye-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
  }
});

Into yokuqala, setI18nConfig(), icwangcisa uqwalaselo lokuqala.

Emva koko kufuneka udibanise umphulaphuli womnyhadala kwi-componentDidMount(), le elementi iyakumamela uhlaziyo kwaye ufowunele handleLocalizationChange() xa zisenzeka.

Indlela yokubambaLocalizationChange() ivula isetI18nConfig() kunye nokunyanzeliswa koHlaziyo(). Oku kuyimfuneko kwizixhobo ze-Android njengoko icandelo kufuneka linikezelwe ukuze utshintsho lubonakale.

Emva koko kufuneka ususe ukuphulaphula kwindlela yeWillUnmount().

Okokugqibela, render() ibuyisela molo ngokusebenzisa translate() kunye nokongeza isitshixo iparameter kuyo. Emva kwala manyathelo, isicelo siya kukwazi "ukuqonda" ukuba loluphi ulwimi olufunekayo kwaye ubonise imiyalezo kuyo.

Ukuqaliswa kwesicelo

Ngoku lixesha lokujonga ukuba inguqulelo isebenza njani.

Okokuqala, siqalisa isicelo kwi-simulator okanye i-emulator ngokuchwetheza

$ basabela-indalo run-ios
$ react-native run-android

Iya kujongeka ngolu hlobo:

Ngoku ungazama ukutshintsha ulwimi kwisiFrentshi ngokuqalisa usetyenziso.

Senza into enye ngesiArabhu, akukho mahluko.

Ukuthi ga, kuhle.

Kodwa kwenzeka ntoni ukuba ukhetha ulwimi olungakhethiyo ekungekho luguqulelo kulo kwisicelo?

Kuyavela ukuba umsebenzi we findBestLanguage kukubonelela ngeyona nguqulelo ilungileyo evela kuzo zonke ezikhoyo. Ngenxa yoko, ulwimi olungagqibekanga luya kuboniswa.

Sithetha ngezicwangciso zefowuni. Umzekelo, kwi-emulator ye-iOS unokubona ukulandelelana kweelwimi.

Ukuba ulwimi olukhethiweyo ayilulo ulwimi olukhethwayo, fumana iBestAvailableLanguage ibuyisela ingachazwanga ukuze kuboniswe ulwimi olungagqibekanga.

Ibhonasi

i-react-native-localize ine-API enika ufikelelo kwinani elikhulu lezinto zolwimi. Ngaphambi kokuba uqale umsebenzi, Kufanelekile ukujonga amaxwebhu.

ezifunyanisiweyo

Isicelo singenziwa ngeelwimi ezininzi ngaphandle kweengxaki. I-React-native-localize lukhetho olukhulu olukuvumela ukuba wandise isiseko somsebenzisi wosetyenziso lwakho.

Ikhowudi yomthombo weprojekthi ilapha.

I-Skillbox iyacebisa:

Ikhosi yokusebenza yeminyaka emibini "Ndingumphuhlisi wewebhu wePRO".

Ikhosi ekwi-Intanethi "C # umqambi ukusuka ekuqaleni".

Ikhosi yonyaka osebenzayo "Umphuhlisi we-PHP ukusuka kwi-0 ukuya kwi-PRO".

umthombo: www.habr.com

Ukubhala usetyenziso lweelwimi ezininzi kwiReact Native