🥇Pišemo višejezičnu aplikaciju u React Native

Lokalizacija proizvoda vrlo je važna za međunarodne tvrtke koje istražuju nove zemlje i regije. Slično, lokalizacija je potrebna za mobilne aplikacije. Ako programer započne međunarodno širenje, važno je dati korisnicima iz druge zemlje priliku da rade sa sučeljem na svom materinjem jeziku. U ovom ćemo članku izraditi React Native aplikaciju pomoću paketa reagirati-nativni-lokalizirati.

Skillbox preporučuje: Edukativni online tečaj "Profesija Java developer".
Podsjećamo: za sve čitatelje "Habra" - popust od 10 000 rubalja pri upisu na bilo koji tečaj Skillbox koristeći promotivni kod "Habr".

Alati i vještine

Da biste razumjeli ovaj članak, potrebne su vam osnovne vještine u radu s React Native. Da biste se upoznali s postavkama radnog stroja, možete koristiti službene upute.

Trebat će nam ove verzije softverskih alata:

Čvor v10.15.0
npm 6.4.1
pređa 1.16.0
reagirati-nativno 0.59.9
react-native-localize 1.1.3
i18n-js 3.3.0

Početak rada

Napravit ćemo aplikaciju koja će podržavati engleski, francuski i arapski jezik. Prvo stvaramo novi projekt koristeći react-native-cli. Da biste to učinili, morate upisati ovo u terminal:

$ react-native init multiLanguage
$ cd višejezični

Dodavanje potrebnih biblioteka

Prvi korak je instaliranje react-native-localize upisivanjem sljedećeg:
$ yarn add react-native-localize

Ako se tijekom postupka instalacije pojave problemi, Vrijedno je pročitati priručnik za instalaciju.

React-native-localize biblioteka daje programeru pristup višejezičnim značajkama. Ali treba joj još jedna biblioteka - i18n.

Ovaj članak opisuje upotrebu I18n.js kako bi se osigurao prijevod u JavaScript.

$ pređe dodati i18n-js

Pa, budući da i18n-js ne pruža predmemoriju ili memoizaciju, predlažem korištenje lodash.memoize za ovo:

$ pređa dodati lodash.memoize

Rad s prijevodima

Kako bi aplikacija mogla raditi s drugim jezicima, prvo morate napraviti direktorij prijevoda unutar src-a, zatim tri JSON datoteke za svaki jezik.

1. en.json za engleski;

2. fr.json za francuski;

3. ar.json za arapski.

Ove datoteke sadrže JSON objekte s ključevima i vrijednostima. Ključ će biti isti za svaki jezik. Aplikacija ga koristi za prikaz tekstualnih informacija.

Vrijednost je tekst koji treba prikazati korisniku.

Engleski:

{"hello": "Zdravo svijete!"}

Французский

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

Арабский

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

Na isti način možete dodati i druge jezike.

Glavni kod

U ovom trenutku trebate otvoriti datoteku App.js i dodati joj uvoze:

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

Nakon toga se dodaju pomoćne funkcije i konstante koje će kasnije biti korisne.

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

Pa, kreirajmo sada komponentu klase 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
  }
});

Prvi element, setI18nConfig(), postavlja početnu konfiguraciju.

Zatim trebate dodati slušatelja događaja u componentDidMount(), ovaj element će slušati ažuriranja i pozvati handleLocalizationChange() kada se dogode.

Metoda handleLocalizationChange() aktivira setI18nConfig() i forceUpdate(). Ovo je neophodno za Android uređaje jer se komponenta mora renderirati da bi promjene bile vidljive.

Zatim trebate ukloniti slušanje iz metode componentWillUnmount().

Konačno, render() vraća hello koristeći translate() i dodajući mu ključni parametar. Nakon ovih koraka, aplikacija će moći "razumjeti" koji je jezik potreban i prikazati poruke na njemu.

Pokretanje aplikacije

Sada je vrijeme da provjerite kako prijevod funkcionira.

Najprije u simulatoru ili emulatoru pokrećemo aplikaciju tipkanjem

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

Izgledat će otprilike ovako:

Sada možete pokušati promijeniti jezik na francuski tako da pokrenete aplikaciju.

Istu stvar radimo s arapskim, nema razlike.

Zasada je dobro.

Ali što se događa ako nasumično odaberete jezik za koji u aplikaciji nema prijevoda?

Ispada da je zadatak findBestLanguagea pružiti optimalan prijevod od svih dostupnih. Kao rezultat, bit će prikazan zadani jezik.

Govorimo o postavkama telefona. Na primjer, u iOS emulatoru možete vidjeti redoslijed jezika.

Ako odabrani jezik nije željeni jezik, findBestAvailableLanguage vraća nedefinirano tako da se prikazuje zadani jezik.

bonus

react-native-localize ima API koji omogućuje pristup velikom broju jezičnih elemenata. Prije nego počnete raditi, Vrijedi provjeriti dokumentaciju.

Zaključci

Aplikacija se bez problema može učiniti višejezičnom. React-native-localize izvrsna je opcija koja vam omogućuje da proširite bazu korisnika svoje aplikacije.

Izvorni kod projekta je ovdje.

Skillbox preporučuje:

Dvogodišnji praktični tečaj "Ja sam PRO web programer".

Mrežni tečaj "C# programer od nule".

Praktični godišnji tečaj "PHP programer od 0 do PRO".

Izvor: www.habr.com

Pisanje višejezične aplikacije u React Native