🥇Vi skriver en flerspråklig applikasjon i React Native

Produktlokalisering er svært viktig for internasjonale selskaper som utforsker nye land og regioner. På samme måte er lokalisering nødvendig for mobilapplikasjoner. Hvis en utvikler begynner internasjonal ekspansjon, er det viktig å gi brukere fra et annet land muligheten til å jobbe med grensesnittet på sitt morsmål. I denne artikkelen vil vi lage en React Native-applikasjon ved å bruke pakken reagere-innfødt-lokalisere.

Skillbox anbefaler: Pedagogisk nettkurs "Profession Java-utvikler".
Vi minner om: for alle lesere av "Habr" - en rabatt på 10 000 rubler når du melder deg på et hvilket som helst Skillbox-kurs ved å bruke kampanjekoden "Habr".

Verktøy og ferdigheter

For å forstå denne artikkelen trenger du grunnleggende ferdigheter i å jobbe med React Native. For å gjøre deg kjent med innstillingene til arbeidsmaskinen kan du bruk de offisielle instruksjonene.

Vi trenger disse versjonene av programvareverktøy:

Node v10.15.0
NPM 6.4.1
garn 1.16.0
reager-native 0.59.9
react-native-localize 1.1.3
i18n-js 3.3.0

Komme i gang

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

$ react-native init multiLanguage
$ cd multiLanguage

Legger til nødvendige biblioteker

Det første trinnet er å installere react-native-localize ved å skrive inn følgende:
$ yarn add react-native-localize

Hvis det oppstår problemer under installasjonsprosessen, Det er verdt å lese installasjonsmanualen.

React-native-localize-biblioteket gir utvikleren tilgang til flerspråklige funksjoner. Men hun trenger ett bibliotek til - i18n.

Denne artikkelen beskriver bruken I18n.js for å gi oversettelse til JavaScript.

$ yarn add i18n-js

Vel, siden i18n-js ikke gir caching eller memoisering, foreslår jeg å bruke lodash.memoize for dette:

$ yarn add lodash.memoize

Jobber med oversettelser

For at applikasjonen skal kunne fungere med andre språk, må du først lage en oversettelseskatalog inne i src, deretter tre JSON-filer 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 til å vise tekstinformasjon.

Verdi er teksten som skal vises til brukeren.

Engelsk:

{"hello": "Hei verden!"}

Французский

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

Арабский

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

Du kan legge til andre språk på samme måte.

Hovedkode

På dette tidspunktet må du åpne App.js-filen og legge til import til den:

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

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

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

Vel, la oss nå lage en komponent av App-klassen:

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

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

Deretter må du legge til en hendelseslytter til componentDidMount(), dette elementet vil lytte etter oppdateringer og kalle handleLocalizationChange() når de skjer.

Metoden handleLocalizationChange() aktiverer setI18nConfig() og forceUpdate(). Dette er nødvendig for Android-enheter siden komponenten må gjengis for at endringene skal være merkbare.

Deretter må du fjerne lyttingen fra componentWillUnmount()-metoden.

Til slutt returnerer render() hello ved å bruke translate() og legge til en nøkkelparameter til den. Etter disse trinnene vil applikasjonen kunne "forstå" hvilket språk som trengs og vise meldinger i det.

Applansering

Nå er tiden inne for å sjekke hvordan oversettelsen fungerer.

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

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

Det vil se omtrent slik ut:

Nå kan du prøve å endre språket til fransk ved å starte programmet.

Vi gjør det samme med arabisk, det er ingen forskjell.

Så langt så bra.

Men hva skjer hvis du velger et tilfeldig språk som det ikke er noen oversettelse for i applikasjonen?

Det viser seg at oppgaven til findBestLanguage er å gi den optimale oversettelsen fra alle tilgjengelige. Som et resultat vil standardspråket vises.

Vi snakker om telefoninnstillinger. For eksempel, i iOS-emulatoren kan du se rekkefølgen på språk.

Hvis det valgte språket ikke er det foretrukne språket, returnerer findBestAvailableLanguage udefinert slik at standardspråket vises.

bonus

react-native-localize har en API som gir tilgang til et stort antall språkelementer. Før du begynner å jobbe, Det er verdt å sjekke ut dokumentasjonen.

Funn

Søknaden kan gjøres flerspråklig uten problemer. React-native-localize er et flott alternativ som lar deg utvide appens brukerbase.

Prosjektets kildekode er her.

Skillbox anbefaler:

Toårig praktisk kurs "Jeg er en PRO-nettutvikler".

Online kurs "C#-utvikler fra bunnen av".

Praktisk årskurs "PHP-utvikler fra 0 til PRO".

Kilde: www.habr.com

Skrive en flerspråklig applikasjon i React Native