🥇Qed niktbu applikazzjoni multilingwi f'React Native

Il-lokalizzazzjoni tal-prodott hija importanti ħafna għall-kumpaniji internazzjonali li jesploraw pajjiżi u reġjuni ġodda. Bl-istess mod, il-lokalizzazzjoni hija meħtieġa għall-applikazzjonijiet mobbli. Jekk żviluppatur jibda espansjoni internazzjonali, huwa importanti li l-utenti minn pajjiż ieħor jingħataw l-opportunità li jaħdmu bl-interface fil-lingwa nattiva tagħhom. F'dan l-artikolu, se noħolqu applikazzjoni React Native billi tuża l-pakkett jirreaġixxu-native-lokalizza.

Skillbox jirrakkomanda: Kors edukattiv onlajn "Professjoni Java Developer".
Infakkrukom: għall-qarrejja kollha ta '"Habr" - skont ta' 10 rublu meta tirreġistra fi kwalunkwe kors ta 'Skillbox billi tuża l-kodiċi promozzjonali "Habr".

Għodda u ħiliet

Biex tifhem dan l-artikolu, għandek bżonn ħiliet bażiċi biex taħdem ma 'React Native. Biex tiffamiljarizza ruħek mas-settings tal-magna tax-xogħol, tista ' uża l-istruzzjonijiet uffiċjali.

Ikollna bżonn dawn il-verżjonijiet tal-għodod tas-softwer:

Node v10.15.0
npm 6.4.1
ħajt 1.16.0
reazzjoni-nattivi 0.59.9
react-native-lokalizza 1.1.3
i18n-js 3.3.0

Kif tibda

Aħna se noħolqu applikazzjoni li se tappoġġja l-Ingliż, il-Franċiż u l-Għarbi. L-ewwel noħolqu proġett ġdid billi tuża react-native-cli. Biex tagħmel dan, għandek bżonn ittajpja dan fit-terminal:

$ react-native init multiLanguage
$ cd multiLingwa

Żieda tal-libreriji meħtieġa

L-ewwel pass huwa li tinstalla react-native-localize billi ttajpja dan li ġej:
$ ħjut żid react-native-localize

Jekk iseħħu problemi waqt il-proċess ta 'installazzjoni, Ta 'min taqra l-manwal tal-installazzjoni.

Il-librerija react-native-localize tagħti lill-iżviluppatur aċċess għal karatteristiċi multilingwi. Iżda hi teħtieġ librerija oħra - i18n.

Dan l-artikolu jiddeskrivi l-użu I18n.js sabiex tipprovdi traduzzjoni f'JavaScript.

$ ħajt żid i18n-js

Ukoll, peress li i18n-js ma jipprovdix caching jew memoization, nissuġġerixxi li tuża lodash.memoize għal dan:

$ ħjut żid lodash.memoize

Ħidma mat-traduzzjonijiet

Sabiex l-applikazzjoni tkun tista' taħdem ma' lingwi oħra, l-ewwel trid toħloq direttorju tat-traduzzjonijiet ġewwa src, imbagħad tliet fajls JSON għal kull lingwa.

1. en.json għall-Ingliż;

2. fr.json għall-Franċiż;

3. ar.json għall-Għarbi.

Dawn il-fajls fihom oġġetti JSON b'ċwievet u valuri. Iċ-ċavetta tkun l-istess għal kull lingwa. Jintuża mill-applikazzjoni biex juri informazzjoni tat-test.

Il-valur huwa t-test li jeħtieġ li jintwera lill-utent.

Ingliż:

{"hello": "Hello Dinja!"}

Французский

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

Арабский

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

Tista 'żżid lingwi oħra bl-istess mod.

Kodiċi prinċipali

F'dan il-punt, għandek bżonn tiftaħ il-fajl App.js u żżid l-importazzjonijiet miegħu:

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

Wara dan, jiżdiedu funzjonijiet awżiljarji u kostanti li se jkunu utli aktar tard.

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

Ukoll, issa ejja noħolqu komponent tal-klassi 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
  }
});

L-ewwel element, setI18nConfig(), jistabbilixxi l-konfigurazzjoni inizjali.

Imbagħad għandek bżonn iżżid semmiegħa tal-avvenimenti ma 'componentDidMount(), dan l-element se jisma' għall-aġġornamenti u jsejjaħ handleLocalizationChange() meta jseħħu.

Il-metodu handleLocalizationChange() jattiva setI18nConfig() u forceUpdate(). Dan huwa meħtieġ għall-apparati Android peress li l-komponent għandu jiġi mogħti biex il-bidliet ikunu notevoli.

Imbagħad għandek bżonn tneħħi s-smigħ mill-metodu componentWillUnmount().

Fl-aħħarnett, render() jirritorna bonjour billi juża translate() u żżid parametru ewlieni miegħu. Wara dawn il-passi, l-applikazzjoni tkun kapaċi "tifhem" liema lingwa hija meħtieġa u turi messaġġi fiha.

Tnedija tal-applikazzjoni

Issa huwa ż-żmien li tivverifika kif taħdem it-traduzzjoni.

L-ewwel, inniedu l-applikazzjoni fis-simulatur jew emulatur billi ttajpja

$ jirreaġixxu-native run-ios
$ react-native run-android

Se tidher xi ħaġa bħal din:

Issa tista' tipprova tibdel il-lingwa għall-Franċiż billi tniedi l-applikazzjoni.

L-istess nagħmlu bl-Għarbi, m'hemm l-ebda differenza.

S'issa tajjeb.

Imma x'jiġri jekk tagħżel lingwa bl-addoċċ li għaliha m'hemmx traduzzjoni fl-applikazzjoni?

Jirriżulta li l-kompitu ta’ findBestLanguage huwa li jipprovdi l-aħjar traduzzjoni minn dawk kollha disponibbli. Bħala riżultat, il-lingwa default se tintwera.

Qed nitkellmu dwar is-settings tat-telefon. Pereżempju, fl-emulator tal-iOS tista 'tara l-ordni tal-lingwi.

Jekk il-lingwa magħżula mhix il-lingwa ppreferuta, findBestAvailableLanguage jirritorna mhux definit sabiex tintwera l-lingwa default.

Bonus

react-native-localize għandu API li jipprovdi aċċess għal numru kbir ta 'elementi tal-lingwa. Qabel ma tibda taħdem, Ta’ min iċċekkja d-dokumentazzjoni.

Sejbiet

L-applikazzjoni tista' ssir multilingwi mingħajr problemi. React-native-localize hija għażla kbira li tippermettilek tespandi l-bażi tal-utenti tal-app tiegħek.

Kodiċi tas-sors tal-proġett qiegħed hawn.

Skillbox jirrakkomanda:

Kors prattiku ta' sentejn "Jien żviluppatur tal-web PRO".

Kors onlajn "Żviluppatur C# mill-bidu".

Kors prattiku tas-sena "Żviluppatur PHP minn 0 għal PRO".

Sors: www.habr.com

Kitba ta' applikazzjoni multilingwi f'React Native