🥇Sibhala uhlelo lokusebenza lwezilimi eziningi ku-React Native

Ukwenziwa kwasendaweni komkhiqizo kubaluleke kakhulu ezinkampanini zamazwe ngamazwe ezihlola amazwe amasha nezifunda. Ngokufanayo, ukwenziwa kwasendaweni kuyadingeka ezinhlelweni zeselula. Uma unjiniyela eqala ukunwetshwa kwamazwe ngamazwe, kubalulekile ukunikeza abasebenzisi abasuka kwelinye izwe ithuba lokusebenza ngesixhumi esibonakalayo ngolimi lwabo lwendabuko. Kulesi sihloko, sizodala uhlelo lokusebenza lwe-React Native sisebenzisa iphakheji phendula-yomdabu-yenza indawo.

I-Skillbox iyancoma: Isifundo se-inthanethi semfundo "Umthuthukisi we-Java ochwepheshe".
Siyakukhumbuza: kubo bonke abafundi be-"Habr" - isaphulelo sama-ruble angu-10 lapho ubhalisa kunoma yisiphi isifundo se-Skillbox usebenzisa ikhodi yephromoshini ethi "Habr".

Amathuluzi namakhono

Ukuze uqonde lesi sihloko, udinga amakhono ayisisekelo ekusebenzeni ne-React Native. Ukuze uzijwayeze nezilungiselelo zomshini osebenzayo, ungakwazi sebenzisa imiyalelo esemthethweni.

Sizodinga lezi zinguqulo zamathuluzi esofthiwe:

Inombolo v10.15.0
npm 6.4.1
uhlamvu 1.16.0
ukusabela-komdabu 0.59.9
ukusabela-komdabu-kwasendaweni 1.1.3
i18n-js 3.3.0

Ukuqalisa

Sizokwakha uhlelo lokusebenza oluzosekela isiNgisi, isiFulentshi nesi-Arabhu. Okokuqala sidala iphrojekthi entsha sisebenzisa i-react-native-cli. Ukuze wenze lokhu, udinga ukuthayipha lokhu kutheminali:

$ react-native init multiLanguage
$ cd Izilimi eziningi

Ukwengeza imitapo yolwazi edingekayo

Isinyathelo sokuqala ukufaka i-react-native-localize ngokuthayipha okulandelayo:
$ yarn engeza ukusabela-komdabu-kwasendaweni

Uma izinkinga zenzeka phakathi nenqubo yokufaka, Kuyafaneleka ukufunda imanuwali yokufaka.

Umtapo wolwazi we-react-native-localize unikeza unjiniyela ukufinyelela ezicini zezilimi eziningi. Kodwa udinga omunye umtapo wolwazi - i-i18n.

Lesi sihloko sichaza ukusetshenziswa I18n.js ukuze unikeze ukuhumusha ku-JavaScript.

$ yarn add i18n-js

Nokho, njengoba i-i18n-js inganikezi ukugcinwa kwesikhashana noma ukwenza ngekhanda, ngiphakamisa ukusebenzisa i-lodash.memoize kulokhu:

$ ntambo engeza lodash.memoize

Ukusebenza ngokuhumusha

Ukuze uhlelo lokusebenza lukwazi ukusebenza nezinye izilimi, udinga kuqala udale inkomba yokuhumusha ngaphakathi kwe-src, bese kuba amafayela amathathu e-JSON olimi ngalunye.

1. en.json yesiNgisi;

2. fr.json yesiFulentshi;

3. i-ar.json yesi-Arabhu.

Lawa mafayela aqukethe izinto ze-JSON ezinokhiye namanani. Ukhiye uzofana ngolimi ngalunye. Isetshenziswa uhlelo lokusebenza ukubonisa ulwazi lombhalo.

Inani umbhalo odinga ukuboniswa kumsebenzisi.

IsiNgisi:

{"hello": "Sawubona Mhlaba!"}

IsiFulentshi

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

Арабский

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

Ungakwazi ukwengeza ezinye izilimi ngendlela efanayo.

Ikhodi eyinhloko

Kuleli qophelo, udinga ukuvula ifayela le-App.js bese wengeza okungenisiwe kulo:

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

Ngemva kwalokhu, imisebenzi eyisizayo kanye nezilinganiso zengezwa ezizoba usizo kamuva.

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

Nokho, manje ake sakhe ingxenye yekilasi Lokusebenza:

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

Isici sokuqala, setI18nConfig(), sisetha ukucushwa kokuqala.

Bese udinga ukungeza umlaleli womcimbi ku-componentDidMount(), le elementi izolalela izibuyekezo futhi ishayele i-handleLocalizationChange() uma kwenzeka.

Indlela yokubambaLocalizationChange() yenza kusebenze i-setI18nConfig() kanye ne-forceUpdate(). Lokhu kuyadingeka kumadivayisi e-Android njengoba ingxenye kufanele inikezwe ukuze izinguquko zibonakale.

Bese udinga ukususa ukulalela ku-componentWillUnmount() indlela.

Ekugcineni, i-render() ibuyisela sawubona ngokusebenzisa i-translate() futhi yengeza ipharamitha yokhiye kuyo. Ngemva kwalezi zinyathelo, uhlelo lokusebenza luzokwazi "ukuqonda" ukuthi yiluphi ulimi oludingekayo futhi lubonise imilayezo kulo.

Ukuqaliswa kohlelo lokusebenza

Manje yisikhathi sokuhlola ukuthi ukuhumusha kusebenza kanjani.

Okokuqala, sethula uhlelo lokusebenza kusifanisi noma i-emulator ngokuthayipha

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

Kuzobukeka kanjena:

Manje ungazama ukushintsha ulimi lube isiFulentshi ngokwethula uhlelo lokusebenza.

Senza into efanayo ngesi-Arabhu, awukho umehluko.

Kuze kube manje kuhle kakhulu.

Kodwa kwenzekani uma ukhetha ulimi olungahleliwe okungekho kulo ukuhumusha kuhlelo lokusebenza?

Kuvele ukuthi umsebenzi we-findBestLanguage ukuhlinzeka ngokuhumusha okuphelele okuvela kuzo zonke ezitholakalayo. Ngenxa yalokho, ulimi oluzenzakalelayo luzovezwa.

Sikhuluma ngamasethingi efoni. Isibonelo, ku-emulator ye-iOS ungabona ukuhleleka kwezilimi.

Uma ulimi olukhethiwe kungelona ulimi olukhethwayo, i- findBestAvailableLanguage ibuyisela ingachazwanga ukuze kuboniswe ulimi olumisiwe.

Ibhonasi

i-react-native-localize ine-API enikeza ukufinyelela kunombolo enkulu yezakhi zolimi. Ngaphambi kokuthi uqale umsebenzi, Kuyafaneleka ukuhlola amadokhumenti.

okutholakele

Uhlelo lokusebenza lungenziwa ngezilimi eziningi ngaphandle kwezinkinga. I-React-native-localize inketho enhle ekuvumela ukuthi unwebe isisekelo sabasebenzisi bohlelo lwakho lokusebenza.

Ikhodi yomthombo wephrojekthi lapha.

I-Skillbox iyancoma:

Isifundo sokwenza iminyaka emibili "Ngingumthuthukisi wewebhu we-PRO".

Inkambo eku-inthanethi "C# developer kusukela ekuqaleni".

Isifundo sonyaka esisebenzayo "Unjiniyela we-PHP kusuka ku-0 kuye ku-PRO".

Source: www.habr.com

Ukubhala uhlelo lokusebenza lwezilimi eziningi ku-React Native