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

Lokalizacija proizvoda je veoma važna za međunarodne kompanije koje razvijaju nove zemlje i regione. Slično, lokalizacija je potrebna za mobilne aplikacije. Ako programer započne međunarodnu ekspanziju, važno je dati korisnicima iz druge zemlje priliku da rade sa interfejsom na svom maternjem jeziku. U ovom članku ćemo kreirati React Native aplikaciju koristeći paket reagovati-nativno-lokalizirati.

Skillbox preporučuje: Obrazovni online kurs "Profesija Java Developer".
Podsećamo: za sve čitaoce "Habra" - popust od 10 rubalja pri upisu na bilo koji Skillbox kurs koristeći "Habr" promotivni kod.

Alati i vještine

Razumijevanje ovog članka zahtijeva osnovne React Native vještine. Da biste se upoznali sa postavkama radne mašine, možete koristite službena uputstva.

Potrebne su nam ove verzije softverskih alata:

Čvor v10.15.0
npm 6.4.1
predivo 1.16.0
react-native 0.59.9
reagovati-nativno-lokalizirati 1.1.3
i18n-js 3.3.0

Getting started

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

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

Dodavanje potrebnih biblioteka

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

Ako naiđete na probleme tokom procesa instalacije, pogledajte priručnik za instalaciju.

React-native-localize biblioteka daje programeru pristup višejezičnim funkcijama. Ali treba joj druga biblioteka - i18n.

Članak opisuje upotrebu I18n.js kako bi se omogućio prijevod u JavaScript-u.

$ pređe dodati i18n-js

Pa, pošto i18n-js ne pruža keširanje ili memoizaciju, predlažem korištenje lodash.memoize za ovo:

$ yarn add lodash.memoize

Rad sa prevodima

Da bi aplikacija radila s drugim jezicima, prvo morate kreirati direktorij prijevoda unutar src-a, zatim tri JSON datoteke za svaki od jezika.

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 (vrijednost) je tekst koji treba prikazati korisniku.

Engleski:

{ "zdravo": "Zdravo svijete!"}

Французский

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

Arap

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

Na isti način se mogu dodati i drugi jezici.

Glavni kod

U ovom trenutku morate otvoriti App.js datoteku 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, sada napravimo komponentu App klase:

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 moramo dodati slušalac događaja komponentiDidMount() , ovaj element će slušati ažuriranja i pozvati handleLocalizationChange() kada se dogode.

Metoda handleLocalizationChange() poziva setI18nConfig() i forceUpdate(). Ovo je neophodno za Android uređaje, jer se komponenta mora prikazati kako bi promjene postale vidljive.

Zatim moramo ukloniti slušatelja iz metode componentWillUnmount().

Konačno, hello se vraća u render() korištenjem translate() i dodavanjem ključnog parametra. 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.

Prvo pokrećemo aplikaciju u simulatoru ili emulatoru kucanjem

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

To će izgledati otprilike ovako:

Sada možete pokušati promijeniti jezik u francuski pokretanjem aplikacije.

Isto radimo i sa arapskim jezikom, nema razlike.

Za sada sve ide dobro.

Ali šta se događa ako odaberete slučajni jezik koji nema prijevod u aplikaciji?

Ispostavilo se da je zadatak findBestLanguage da obezbedi najbolji mogući prevod među svim dostupnim. Kao rezultat toga, bit će prikazan jezik koji je standardno postavljen.

Radi se o postavkama telefona. Tako, na primjer, u iOS emulatoru možete vidjeti redoslijed jezika.

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

bonus

react-native-localize ima API koji omogućava pristup velikom broju jezičkih elemenata. Prije početka rada, vrijedi pročitati dokumentaciju.

nalazi

Aplikacija se može učiniti višejezičnom bez ikakvih problema. React-native-localize je odlična opcija koja vam omogućava da proširite opseg korisnika vaše aplikacije.

Izvorni kod projekta je ovdje.

Skillbox preporučuje:

Dvogodišnji praktični kurs "Ja sam PRO web developer".

Online kurs "C# programer od nule".

Praktična godina kursa "PHP programer od 0 do PRO".

izvor: www.habr.com

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