🥇Ni skribas plurlingvan aplikaĵon sur React Native

La lokalizado de produktoj estas tre grava por internaciaj kompanioj, kiuj disvolvas novajn landojn kaj regionojn. Simile, lokalizo estas necesa por moveblaj aplikoj. Se programisto komencas internacian ekspansion, gravas doni al uzantoj de alia lando la ŝancon labori kun la interfaco en sia gepatra lingvo. En ĉi tiu artikolo, ni kreos React Native-aplon uzante la pakon reagi-denaska-lokalizi.

Skillbox rekomendas: Eduka interreta kurso "Profesia Java Programisto".
Ni memorigas vin: por ĉiuj legantoj de "Habr" - rabato de 10 000 rubloj kiam oni enskribas en iu ajn Skillbox-kurso per la reklamkodo "Habr".

Iloj kaj kapabloj

Kompreni ĉi tiun artikolon postulas bazajn kapablojn de React Native. Por konatiĝi kun la agordoj de la labormaŝino, vi povas uzu oficialajn instrukciojn.

Ni bezonas ĉi tiujn versiojn de programaraj iloj:

Nodo v10.15.0
npm 6.4.1
fadeno 1.16.0
reak-denaska 0.59.9
reagi-denaska-lokalizi 1.1.3
i18n-js 3.3.0

Komencante

Ni kreos aplikaĵon, kiu subtenos la anglan, francan kaj araban. Unue ni kreas novan projekton uzante react-native-cli. Por fari tion, en la terminalo vi devas tajpi ĉi tion:

$ reak-denaska init multilingvo
$ cd plurlingva

Aldonante la bezonatajn bibliotekojn

La unua paŝo estas instali react-native-localize tajpante la jenon:
$ yarn add react-native-localize

Se vi renkontas problemojn dum la instala procezo, kontrolu la instalan manlibron.

La biblioteko reakci-denaska-lokalizi donas al la programisto aliron al plurlingvaj funkcioj. Sed ŝi bezonas alian bibliotekon - i18n.

La artikolo priskribas la uzon I18n.js por disponigi tradukon en JavaScript.

$ yarn aldoni i18n-js

Nu, ĉar i18n-js ne provizas kaŝmemoron aŭ memorigon, mi sugestas uzi lodash.memoize por ĉi tio:

$ yarn aldoni lodash.memoize

Laborante kun tradukoj

Por ke la aplikaĵo funkciu kun aliaj lingvoj, vi unue devas krei traduk-dosierujon ene de src, poste tri JSON-dosierojn por ĉiu el la lingvoj.

1. en.json por la angla;

2. fr.json por la franca;

3. ar.json por la araba.

Ĉi tiuj dosieroj enhavas JSON-objektojn kun ŝlosiloj kaj valoroj. La ŝlosilo estos la sama por ĉiu lingvo. Ĝi estas uzata de la aplikaĵo por montri tekstajn informojn.

Valoro (valoro) estas la teksto, kiu devas esti montrita al la uzanto.

Angla:

{ "hello": "Saluton Mondo!"}

Franca

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

Арабский

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

Aliaj lingvoj povas esti aldonitaj en la sama maniero.

Ĉefa kodo

Je ĉi tiu punkto, vi devas malfermi la dosieron App.js kaj aldoni importaĵojn al ĝi:

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

Post tio oni aldonas helpajn funkciojn kaj konstantojn, kiuj estos utilaj poste.

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

Nu, nun ni kreu komponanton de la App-klaso:

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

La unua elemento, setI18nConfig(), fiksas la komencan agordon.

Tiam ni devas aldoni eventoaŭskultilon al componentDidMount() , ĉi tiu elemento aŭskultos ĝisdatigojn kaj vokos handleLocalizationChange() kiam ili okazos.

La metodo handleLocalizationChange() alvokas setI18nConfig() kaj forceUpdate(). Ĉi tio estas necesa por Android-aparatoj, ĉar la komponanto devas esti prezentita por ke la ŝanĝoj fariĝu videblaj.

Tiam ni devas forigi la aŭskultanton de la componentWillUnmount() metodo.

Fine, saluton estas resendita en render() uzante translate() kaj aldonante ŝlosilan parametron al ĝi. Post ĉi tiuj paŝoj, la aplikaĵo povos "kompreni" kiun lingvon necesas kaj montri mesaĝojn en ĝi.

Lanĉo de aplikaĵo

Nun estas la tempo por kontroli kiel funkcias la traduko.

Unue ni rulas la aplikaĵon en la simulilo aŭ emulilo tajpante

$ reak-denaska run-ios
$ reak-denaska rul-androido

Ĝi aspektos kiel ĉi tio:

Nun vi povas provi ŝanĝi la lingvon al la franca lanĉante la aplikaĵon.

Ni faras la samon kun la araba lingvo, ne estas diferenco.

Ĝis nun ĉio iras bone.

Sed kio okazas se vi elektas hazardan lingvon, kiu ne havas tradukon en la apo?

Rezultas, ke la tasko de findBestLanguage estas provizi la plej bonan eblan tradukon inter ĉiuj disponeblaj. Kiel rezulto, la lingvo kiu estis agordita defaŭlte estos montrata.

Temas pri telefonaj agordoj. Do, ekzemple, en la iOS-emulilo, vi povas vidi la ordon de lingvoj.

Se la elektita lingvo ne estas la preferata lingvo, findBestAvailableLanguage resendas nedifinita tiel ke la defaŭlta lingvo montriĝas.

Bono

react-native-localize havas API kiu disponigas aliron al granda nombro da lingvoelementoj. Antaŭ ol komenci laboron, indas legi la dokumentadon.

trovoj

La aplikaĵo povas fariĝi plurlingva senprobleme. React-native-localize estas bonega eblo, kiu ebligas al vi vastigi la gamon de uzantoj de via aplikaĵo.

Projekta fontkodo situanta ĉi tie.

Skillbox rekomendas:

Dujara praktika kurso "Mi estas PRO TTT-programisto".

Interreta kurso "C#-programisto de nulo".

Praktika jarkurso "PHP-programisto de 0 al PRO".

fonto: www.habr.com

Ni skribas plurlingvan aplikaĵon sur React Native