🥇Pisanje višejezične aplikacije na React Native

Lokacija proizvoda vrlo je važna za međunarodne kompanije koje ulaze na nova tržišta i regije. Slična lokacija je potrebna i mobilnim aplikacijama. Kada programer započne međunarodnu ekspanziju, važno je pružiti korisnicima iz druge zemlje mogućnost korištenja sučelja na njihovom jeziku. U ovom članku ćemo stvoriti aplikaciju React Native koristeći paket react-native-localize.

Skillbox preporučuje: Online edukacijski tečaj «Zanimanje Java programer».
Podsjećamo: za sve čitatelje "Habra" — popust od 10 000 rubalja prilikom upisa na bilo koji tečaj Skillbox uz promo kod "Habr".

Alati i vještine

Za razumijevanje ovog članka potrebne su osnovne vještine rada s React Native. Za upoznavanje s postavkama radne mašine možete koristiti službenu instrukciju.

Bit će nam potrebne sljedeće verzije softverskih alata:

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

Počinjemo

Stvorit ćemo aplikaciju koja će podržavati engleski, francuski i arapski jezik. Prvo kreiramo novi projekt koristeći react-native-cli. Za to u terminalu trebate upisati sljedeće:

$ react-native init multiLanguage
$ cd multiLanguage

Dodavanje potrebnih biblioteka

Prvo je potrebno instalirati react-native-localize, upisivanjem sljedećeg:
$ yarn add react-native-localize

Ako se tijekom instalacije pojave problemi, vrijedno je proučiti priručnik za instalaciju.

Biblioteka react-native-localize daje programeru pristup višekratnim funkcijama. No, potrebna je još jedna biblioteka — i18n.

U članku se opisuje korištenje I18n.js za pružanje prijevoda u JavaScriptu.

$ yarn add i18n-js

S obzirom da i18n-js ne pruža keširanje ili memoizaciju, predlažem korištenje lodash.memoize za to:

$ yarn add lodash.memoize

Rad s prijevodima

Kako bi aplikacija mogla raditi i s drugim jezicima, prvo je potrebno stvoriti katalog translations unutar src, zatim tri JSON datoteke, za svaki jezik.

1. en.json za engleski;

2. fr.json za francuski;

3. ar.json za arapski.

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

Vrijednost (value) je tekst koji treba prikazati korisniku.

Engleski jezik:

{ "hello": "Hello World!"}

Francuski

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

Arapski

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

Na sličan način mogu se dodati i drugi jezici.

Osnovni kod

U ovom trenutku potrebno je otvoriti datoteku App.js i dodati u nju import:

import React from "react";
import * as RNLocalize from "react-native-localize";
import i18n from "i18n-js";
import memoize from "lodash.memoize"; // Koristite za keširanje/memoizaciju za bolju izvedbu
 
import {
  I18nManager,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View
} from "react-native";

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

const translationGetters = {
  // lenj zahtjevi (metro bundler ne podržava simbole)
  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 = () => {
  // rezervna opcija ako nijedni dostupni jezik ne odgovara
  const fallback = { languageTag: "en", isRTL: false };
 
  const { languageTag, isRTL } =
    RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
    fallback;
 
  // očisti keš prevod
  translate.cache.clear();
  // ažuriraj pravac rasporeda
  I18nManager.forceRTL(isRTL);
  // postavi i18n-js konfiguraciju
  i18n.translations = { [languageTag]: translationGetters[languageTag]() };
  i18n.locale = languageTag;
};

Sada ćemo stvoriti komponentu klase App:

export default class App extends React.Component {
  constructor(props) {
    super(props);
    setI18nConfig(); // postavi početnu konfiguraciju
  }
 
  componentDidMount() {
    RNLocalize.addEventListener("change", this.handleLocalizationChange);
  }
 
  componentWillUnmount() {
    RNLocalize.removeEventListener("change", this.handleLocalizationChange);
  }
 
  handleLocalizationChange = () => {
    setI18nConfig();
    this.forceUpdate();
  };
 
  render() {
    return (
      
        {translate("hello")}
      
    );
  }
}
 
const styles = StyleSheet.create({
  safeArea: {
    backgroundColor: "white",
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  value: {
    fontSize: 18
  }
});

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

Zatim u componentDidMount() treba dodati slušanje događaja; ovaj element će pratiti ažuriranja i pozvati handleLocalizationChange() kada se dogode.

Metoda handleLocalizationChange() aktivira setI18nConfig() i forceUpdate(). Ovo je potrebno za uređaje na Androidu, jer komponenta mora biti renderirana kako bi promjene postale vidljive.

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

Na kraju, u render() se vraća hello koristeći translate() i dodavanjem parametra key. Nakon tih koraka, aplikacija će moći "razumjeti" koji jezik je potreban i prikazivati poruke na njemu.

Pokretanje aplikacije

Sada je pravo vrijeme za provjeru kako radi prevođenje.

Prvo pokrećemo aplikaciju u simulatoru ili emulatoru tako da ukucamo

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

Izgledat će otprilike ovako:

Sada možete pokušati promijeniti jezik na francuski, a zatim pokrenuti aplikaciju.

S arapskim jezikom radimo isto, nema razlike.

Za sada sve ide dobro.

Ali što će se dogoditi ako odaberete slučajan jezik za koji nema prijevoda u aplikaciji?

Ispostavlja se da je zadatak findBestLanguage - pružiti optimalni prijevod od svih dostupnih. Kao rezultat, bit će prikazan jezik koji je postavljen kao zadani.

Riječ je o postavkama telefona. Tako, na primjer, u iOS emulatoru možete pogledati redoslijed jezika.

Ako odabrani jezik nije preferirani, findBestAvailableLanguage vraća undefined, pa se prikazuje jezik koji je postavljen kao zadani.

Bonus

React-native-localize ima API koji omogućuje pristup velikom broju jezičnih elemenata. Prije nego što započnete s radom, trebalo bi se upoznati s dokumentacijom..

Zaključci

Aplikaciju možete napraviti višejezičnom bez većih problema. React-native-localize je izvrsna opcija koja omogućuje proširenje kruga korisnika aplikacije.

Izvorni kod projekta nalazi se ovdje.

Skillbox preporučuje:

Dvoipogodišnji praktični tečaj „Ja sam PRO web programer“.

Online tečaj „C# programer od nule“.

Praktični godišnji tečaj «PHP programer od nule do PRO».

Izvor: habr.com

Pišemo višejezičnu aplikaciju na React Native