Vi skriver en flerspråklig applikasjon med React Native

Lokalisering av produkter er svært viktig for internasjonale selskaper som går inn i nye land og regioner. På samme måte er lokalisering nødvendig for mobilapplikasjoner. Hvis en utvikler starter en internasjonal ekspansjon, er det viktig å gi brukere fra et annet land muligheten til å bruke grensesnittet på sitt morsmål. I denne artikkelen vil vi lage en React Native-applikasjon ved å bruke pakken react-native-localize.

Skillbox anbefaler: Nettbasert utdanningskurs «Yrkesfag Java-utvikler».
Vi minner om: for alle lesere av «Habr» — 10 000 rubler rabatt ved påmelding til hvilket som helst Skillbox-kurs med kampanjekoden «Habr».

Verktøy og ferdigheter

For å forstå denne artikkelen trenger du grunnleggende ferdigheter i React Native. For å bli kjent med oppsettet til arbeidsmaskinen kan du bruke den offisielle guiden.

Vi vil trenge følgende versjoner av programverktøyene:

• 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

Vi begynner

Vi skal lage en applikasjon som støtter engelsk, fransk og arabisk. Først lager vi et nytt prosjekt ved å bruke react-native-cli. For dette må du skrive følgende i terminalen:

$ react-native init multiLanguage
$ cd multiLanguage

Legg til nødvendige biblioteker

Først må du installere react-native-localize ved å skrive følgende:
$ yarn add react-native-localize

Hvis det oppstår problemer under installasjonen, burde du se gjennom installasjonsmanualen.

Biblioteket react-native-localize gir utvikleren tilgang til flerspråklige funksjoner. Men det trenger et annet bibliotek — i18n.

Artikkelen beskriver bruken av I18n.js for å muliggjøre oversettelse i JavaScript.

$ yarn add i18n-js

Og siden i18n-js ikke tilbyr caching eller memoization, foreslår jeg å bruke lodash.memoize for dette:

$ yarn add lodash.memoize

Arbeid med oversettelser

For at applikasjonen skal kunne fungere med andre språk, må du først opprette en katalog oversettelser inne i src, deretter opprette tre JSON-filer, én for hvert språk.

1. en.json for engelsk;

2. fr.json for fransk;

3. ar.json for arabisk.

Disse filene inneholder JSON-objekter med nøkler og verdier. Nøkkelen vil være den samme for hvert språk. Den brukes av applikasjonen for å vise tekstinformasjon.

Verdien (value) er teksten som må vises for brukeren.

Engelsk:

{ «hello»: «Hello World!»}

Fransk

{ «hello»: «Hallo verden!»}

Arabisk

{ «hello»: «مرحبًا بالعالم»}

På samme måte kan man legge til andre språk.

Hovedkode

I dette trinnet må du åpne filen App.js og legge til importen:

import React from "react";
import * as RNLocalize from "react-native-localize";
import i18n from "i18n-js";
import memoize from "lodash.memoize"; // Brukes for caching/memoize for bedre ytelse

import {
  I18nManager,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View
} from "react-native";

Deretter legges det til hjelpefunksjoner og konstanter som vil være nyttige senere.

const translationGetters = {
  // lazy requires (metro bundler støtter ikke 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 hvis ingen tilgjengelige språk passer
  const fallback = { languageTag: "en", isRTL: false };

  const { languageTag, isRTL } =
    RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
    fallback;

  // tøm oversettelsescachen
  translate.cache.clear();
  // oppdater layoutretning
  I18nManager.forceRTL(isRTL);
  // sett i18n-js konfigurasjon
  i18n.translations = { [languageTag]: translationGetters[languageTag]() };
  i18n.locale = languageTag;
};

Nå skal vi lage klassekomponenten App:

export default class App extends React.Component {
  constructor(props) {
    super(props);
    setI18nConfig(); // sett initial konfigurasjon
  }

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

Det første elementet — setI18nConfig() — setter den innledende konfigurasjonen.

Deretter i componentDidMount() må du legge til en lytter for hendelser; dette elementet vil overvåke oppdateringer og kalle handleLocalizationChange() når de skjer.

Metoden handleLocalizationChange() aktiverer setI18nConfig() og forceUpdate(). Dette er nødvendig for Android-enheter, da komponenten må gjengis for at endringene skal bli synlige.

Deretter må du fjerne lytteren i componentWillUnmount().

Til slutt, i render() returneres hello ved å bruke translate() og legge til parameteren key. Etter disse handlingene vil applikasjonen kunne forstå hvilket språk som trengs, og vise meldinger på dette språket.

Kjøre applikasjonen

Nå er det på tide å sjekke hvordan oversettelsen fungerer.

Først kjører vi applikasjonen i simulatoren eller emulatoren ved å skrive

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

Det vil se omtrent slik ut:

Nå kan vi prøve å bytte språk til fransk, og deretter kjøre applikasjonen.

Med arabisk gjør vi det samme, det er ingen forskjell.

Så langt går det bra.

Men hva skjer hvis vi velger et tilfeldig språk som ikke er oversatt i applikasjonen?

Det viser seg at oppgaven findBestLanguage er å gi den beste oversettelsen blant alle tilgjengelige. Resultatet blir at språket som er satt som standard, vises.

Dette gjelder innstillingene på telefonen. For eksempel kan man i iOS-emulatoren se rekkefølgen på språkene.

Hvis det valgte språket ikke er preferert, returnerer findBestAvailableLanguage undefined, så det språket som er satt som standard, vises.

Bonus

react-native-localize har et API som gir tilgang til et stort antall språkelementer. Før vi begynner å jobbe, bør man gjøre seg kjent med dokumentasjonen..

Konklusjoner

Applikasjonen kan gjøres flerspråklig uten store problemer. React-native-localize er et utmerket valg som lar oss utvide brukerbasen for applikasjonen.

Kildekoden til prosjektet finnes her.

Skillbox anbefaler:

• Toårig praktisk kurs «Jeg er WEB-utvikler PRO».
• Nettkurs «C#-utvikler fra bunnen av».
• Praktisk ettårig kurs «PHP-utvikler fra 0 til PRO».

Kilde: habr.com