🥇We schrijven een meertalige applicatie in React Native

Productlokalisatie is erg belangrijk voor internationale bedrijven die nieuwe landen en regio's verkennen. Op dezelfde manier is lokalisatie nodig voor mobiele applicaties. Als een ontwikkelaar internationaal gaat uitbreiden, is het belangrijk om gebruikers uit een ander land de kans te geven om met de interface in hun moedertaal te werken. In dit artikel zullen we een React Native-applicatie maken met behulp van het pakket reageren-native-lokaliseren.

Skillbox beveelt aan: Educatieve online cursus "Beroep Java-ontwikkelaar".
Herinnering: voor alle lezers van "Habr" - een korting van 10 roebel bij inschrijving voor een Skillbox-cursus met behulp van de promotiecode "Habr".

Gereedschappen en vaardigheden

Om dit artikel te begrijpen, heb je basisvaardigheden nodig in het werken met React Native. Om vertrouwd te raken met de instellingen van de werkende machine, kunt u dat doen gebruik de officiële instructies.

We hebben deze versies van softwaretools nodig:

Knooppunt v10.15.0
npm 6.4.1
garen 1.16.0
reactief 0.59.9
reageren-native-lokaliseren 1.1.3
i18n-js 3.3.0

Aan de slag

We zullen een applicatie maken die Engels, Frans en Arabisch ondersteunt. Eerst maken we een nieuw project met behulp van react-native-cli. Om dit te doen, typt u dit in de terminal:

$ react-native init multiLanguage
$ cd meertalig

Het toevoegen van de benodigde bibliotheken

De eerste stap is het installeren van react-native-localize door het volgende te typen:
$ garen voegt react-native-localize toe

Als er problemen optreden tijdens het installatieproces, Het is de moeite waard om de installatiehandleiding te lezen.

De react-native-localize-bibliotheek geeft de ontwikkelaar toegang tot meertalige functies. Maar ze heeft nog één bibliotheek nodig: i18n.

Dit artikel beschrijft het gebruik I18n.js om vertaling naar JavaScript te bieden.

$ garen i18n-js toevoegen

Omdat i18n-js geen caching of memoisatie biedt, stel ik voor om hiervoor lodash.memoize te gebruiken:

$ garen voeg lodash.memoize toe

Werken met vertalingen

Om ervoor te zorgen dat de applicatie met andere talen kan werken, moet u eerst een map met vertalingen in src maken en vervolgens drie JSON-bestanden voor elke taal.

1. en.json voor Engels;

2. fr.json voor Frans;

3. ar.json voor Arabisch.

Deze bestanden bevatten JSON-objecten met sleutels en waarden. De sleutel zal voor elke taal hetzelfde zijn. Het wordt door de applicatie gebruikt om tekstinformatie weer te geven.

Waarde is de tekst die aan de gebruiker moet worden getoond.

De Engelse taal:

{"hallo": "Hallo wereld!"}

Французский

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

Арабский

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

Op dezelfde manier kun je andere talen toevoegen.

Hoofd code

Op dit punt moet u het App.js-bestand openen en imports eraan toevoegen:

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

Hierna worden hulpfuncties en constanten toegevoegd die later nuttig zullen zijn.

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

Laten we nu een component van de App-klasse maken:

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

Het eerste element, setI18nConfig(), stelt de initiële configuratie in.

Vervolgens moet u een gebeurtenislistener toevoegen aan componentDidMount(). Dit element luistert naar updates en roept handleLocalizationChange() aan wanneer deze plaatsvinden.

De methode handleLocalizationChange() activeert setI18nConfig() en forceUpdate(). Dit is nodig voor Android-apparaten, omdat de component moet worden weergegeven voordat de wijzigingen merkbaar zijn.

Vervolgens moet u het luisteren uit de componentWillUnmount() -methode verwijderen.

Ten slotte retourneert render() hallo door translate() te gebruiken en er een sleutelparameter aan toe te voegen. Na deze stappen kan de applicatie “begrijpen” welke taal nodig is en daarin berichten weergeven.

Applicatie starten

Dit is het moment om te controleren hoe de vertaling werkt.

Eerst starten we de applicatie in de simulator of emulator door te typen

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

Het zal er ongeveer zo uitzien:

Nu kunt u proberen de taal in het Frans te veranderen door de applicatie te starten.

We doen hetzelfde met het Arabisch, er is geen verschil.

Tot nu toe gaat het goed.

Maar wat gebeurt er als u een willekeurige taal selecteert waarvoor geen vertaling in de applicatie aanwezig is?

Het blijkt dat de taak van findBestLanguage is om de optimale vertaling te bieden van alle beschikbare vertalingen. Als gevolg hiervan wordt de standaardtaal weergegeven.

We hebben het over telefooninstellingen. In de iOS-emulator kunt u bijvoorbeeld de volgorde van de talen zien.

Als de geselecteerde taal niet de voorkeurstaal is, retourneert findBestAvailableLanguage ongedefinieerd zodat de standaardtaal wordt weergegeven.

Bonus

react-native-localize beschikt over een API die toegang biedt tot een groot aantal taalelementen. Voordat u aan het werk gaat, Het is de moeite waard om de documentatie te bekijken.

Bevindingen

De aanvraag kan zonder problemen meertalig worden gemaakt. React-native-localize is een geweldige optie waarmee u het gebruikersbestand van uw app kunt uitbreiden.

Projectbroncode is hier.

Skillbox beveelt aan:

Tweejarige praktijkopleiding "Ik ben een PRO-webontwikkelaar".

Online cursus "C#-ontwikkelaar vanaf nul".

Praktische jaarcursus "PHP-ontwikkelaar van 0 tot PRO".

Bron: www.habr.com

Een meertalige applicatie schrijven in React Native