🥇Tiri kunyora mitauro yakawanda muReact Native

Kugadziriswa kwechigadzirwa kwakakosha kumakambani epasi rese ari kuongorora nyika itsva nematunhu. Saizvozvo, nzvimbo inodiwa kune nharembozha. Kana mugadziri atanga kuwedzera kune dzimwe nyika, zvakakosha kupa vashandisi vanobva kune imwe nyika mukana wekushanda neiyo interface mumutauro wavo. Muchikamu chino, tichagadzira React Native application tichishandisa pasuru react-native-localize.

Skillbox inokurudzira: Dzidzo yepamhepo kosi "Professional Java developer".
Tinoyeuchidza: kune vese vaverengi veHabr - a 10 ruble mutengo paunenge uchinyoresa mune chero Skillbox kosi uchishandisa iyo Habr promo kodhi.

Zvishandiso uye unyanzvi

Kuti unzwisise chinyorwa ichi, unoda hunyanzvi hwekutanga mukushanda neReact Native. Kuti uzvizive nemaseting emushini unoshanda, unogona shandisa mirairo yepamutemo.

Tichada aya mavhezheni esoftware zvishandiso:

Node v10.15.0
npm 6.4.1
shinda 1.16.0
react-native 0.59.9
react-native-localize 1.1.3
i18n-js 3.3.0

Kutanga

Isu tichagadzira application inotsigira Chirungu, French neArabic. Kutanga tinogadzira chirongwa chitsva tichishandisa react-native-cli. Kuti uite izvi, unofanirwa kunyora izvi mune terminal:

$ react-native init multiLanguage
$ cd MultiLanguage

Kuwedzera maraibhurari anodiwa

Danho rekutanga nderekuisa react-native-localize nekunyora zvinotevera:
$ yarn wedzera react-native-localize

Kana matambudziko akaitika panguva yekuisa, Zvakakodzera kuverenga bhuku rekuisa.

Iyo react-native-localize raibhurari inopa mugadziri mukana kune emitauro yakawanda. Asi anoda imwe raibhurari - i18n.

Ichi chinyorwa chinotsanangura kushandiswa I18n.js kuitira kupa shanduro muJavaScript.

$ yarn wedzera i18n-js

Zvakanaka, sezvo i18n-js isingapi caching kana memoization, ini ndinokurudzira kushandisa lodash.memoize pane izvi:

$ yarn wedzera lodash.memoize

Kushanda neshanduro

Kuti application ikwanise kushanda nemimwe mitauro, unofanira kutanga wagadzira dhairekitori reshanduro mukati me src, wozoita mafaera matatu eJSON pamutauro wega wega.

1. en.json yechirungu;

2. fr.json yechiFrench;

3. ar.json yechiArab.

Aya mafaera ane JSON zvinhu zvine makiyi uye kukosha. Kiyi ichave yakafanana pamutauro wega wega. Inoshandiswa neapplication kuratidza ruzivo rwemavara.

Kukosha ndiwo mavara anoda kuratidzwa kumushandisi.

Chirungu:

{"mhoroi": "Mhoro Nyika!"}

French

{"mhoroi": "Kwaziwai Monde!"}

Arabic

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

Iwe unogona kuwedzera mimwe mitauro nenzira imwechete.

Main code

Panguva ino, iwe unofanirwa kuvhura iyo App.js faira uye kuwedzera kunze kune iyo:

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

Mushure meizvi, mabasa ekubatsira uye zvigadziriswe zvinowedzerwa izvo zvichave zvinobatsira gare gare.

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

Zvakanaka, ikozvino ngatigadzire chikamu cheApp class:

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

Chinhu chekutanga, setI18nConfig (), inoseta yekutanga kumisikidzwa.

Ipapo iwe unofanirwa kuwedzera muteereri wechiitiko kune componentDidMount(), chinhu ichi chinoteerera kune zvigadziriso uye kufonera handleLocalizationChange() pazvinoitika.

Iyo handleLocalizationChange() nzira inomutsa setI18nConfig() uye forceUpdate(). Izvi zvinodikanwa kumidziyo yeAroid sezvo chikamu chinofanirwa kupihwa kuti shanduko dzionekwe.

Ipapo iwe unofanirwa kubvisa kuterera kubva kuchikamuWillUnmount () nzira.

Pakupedzisira, render() inodzosera mhoro nekushandisa translate() uye nekuwedzera kiyi parameter kwairi. Mushure mematanho aya, iyo application ichakwanisa "kunzwisisa" mutauro unodiwa uye kuratidza mameseji mairi.

Kutanga application

Iye zvino ndiyo nguva yekutarisa kuti shanduro inoshanda sei.

Kutanga, isu tinotangisa application mune simulator kana emulator nekunyora

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

Ichaita seizvi:

Iye zvino unogona kuedza kushandura mutauro kuenda kuFrench nekutanga application.

Isu tinoita chinhu chimwe chete neArabic, hapana musiyano.

So far saka zvakanaka.

Asi chii chinoitika kana ukasarudza mutauro wakasarudzika usingashandurwe mukushandisa?

Zvinoitika kuti basa re findBestLanguage ndere kupa shanduro yakakwana kubva pane zvese zviripo. Nekuda kweizvozvo, mutauro wakasarudzika ucharatidzwa.

Tiri kutaura pamusoro pezvirongwa zvefoni. Semuenzaniso, mune iOS emulator unogona kuona kurongeka kwemitauro.

Kana mutauro wasarudzwa usiri iwo mutauro unofarirwa, tsvagaBestAvailableLanguage inodzosa isina kutsanangurwa kuitira kuti mutauro unogara uripo uratidzwe.

Bhonasi

react-native-localize ine API inopa mukana kune nhamba huru yezvinhu zvemutauro. Usati watanga basa, Zvakakodzera kutarisa zvinyorwa.

zvakawanikwa

Iko kushandiswa kunogona kuitwa mitauro yakawanda pasina matambudziko. React-native-localize isarudzo yakanaka iyo inokutendera kuti uwedzere mushandisi weapp yako.

Project source code iri pano.

Skillbox inokurudzira:

Makore maviri anoshanda kosi "Ini ndiri PRO webhu developer".

Yepamhepo kosi "C # mugadziri kubva pakutanga".

Kosi yegore rimwechete "PHP mugadziri kubva 0 kusvika PRO".

Source: www.habr.com

Kunyora mitauro yakawanda muReact Native