🥇We schrijven een meertalige applicatie in React Native

Productlocalisatie is cruciaal voor internationale bedrijven die nieuwe landen en regio's betreden. Evenzo is lokalisatie ook nodig voor mobiele applicaties. Wanneer een ontwikkelaar internationale expansie begint, is het belangrijk om gebruikers uit een ander land de mogelijkheid te bieden om met de interface in hun moedertaal te werken. In dit artikel creëren we een React Native-applicatie met behulp van het pakket react-native-localize.

Skillbox raadt aan: Online opleidingscursus ‘Beroep Java-developer’.
Ter herinnering: voor alle lezers van «Habr» — een korting van 10.000 roebel bij inschrijving voor elke cursus van Skillbox met de promocode «Habr».

Tools en vaardigheden

Basisvaardigheden in React Native zijn vereist om dit artikel te begrijpen. Voor informatie over het instellen van uw werkmachine kunt u de officiële gids raadplegen.

We hebben de volgende versies van softwaretools nodig:

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

Laten we beginnen

We gaan een applicatie creëren die de Engelse, Franse en Arabische talen ondersteunt. Eerst maken we een nieuw project aan met react-native-cli. Typ hiervoor het volgende in de terminal:

$ react-native init multiLanguage
$ cd multiLanguage

Benodigde bibliotheken toevoegen

Allereerst moet react-native-localize worden geïnstalleerd door het volgende te typen:
$ yarn add react-native-localize

Als er tijdens de installatie problemen optreden, is het de moeite waard om de installatiehandleiding te raadplegen.

De react-native-localize-bibliotheek geeft de ontwikkelaar toegang tot meertalige functies. Maar hiervoor is ook een andere bibliotheek nodig: i18n.

In het artikel wordt het gebruik van I18n.js beschreven om vertalingen in JavaScript mogelijk te maken.

$ yarn add i18n-js

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

$ yarn add lodash.memoize

Werken met vertalingen

Om de applicatie te laten werken met andere talen, moet eerst de map translations binnen src worden gemaakt, en vervolgens drie JSON-bestanden voor elke taal.

1. en.json voor het Engels;

2. fr.json voor het Frans;

3. ar.json voor het Arabisch.

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

De waarde (value) is de tekst die aan de gebruiker moet worden getoond.

Engels:

{ "hello": "Hello World!"}

Frans

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

Arabisch

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

Op dezelfde manier kunnen ook andere talen worden toegevoegd.

Basiscode

Op dit punt moet het bestand App.js worden geopend en moet de import worden toegevoegd:

import React from "react";
import * as RNLocalize from "react-native-localize";
import i18n from "i18n-js";
import memoize from "lodash.memoize"; // Gebruik voor caching/memoize voor betere prestaties

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

Daarna worden de hulpfuncties en constanten toegevoegd die later van pas komen.

const translationGetters = {
  // lui vereist (metro bundler ondersteunt geen 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 als geen beschikbare taal past
  const fallback = { languageTag: "en", isRTL: false };

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

  // wis de vertalingscache
  translate.cache.clear();
  // update de lay-outrichting
  I18nManager.forceRTL(isRTL);
  // stel i18n-js configuratie in
  i18n.translations = { [languageTag]: translationGetters[languageTag]() };
  i18n.locale = languageTag;
};

Laten we nu de klassecomponent App maken:

export default class App extends React.Component {
  constructor(props) {
    super(props);
    setI18nConfig(); // stel initiële configuratie in
  }

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

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

Vervolgens moet in componentDidMount() een event listener worden toegevoegd, dit element zal updates volgen en handleLocalizationChange() aanroepen wanneer deze zich voordoen.

De methode handleLocalizationChange() activeert setI18nConfig() en forceUpdate(). Dit is nodig voor Android-apparaten, omdat de component moet worden gerenderd om de wijzigingen zichtbaar te maken.

Daarna moeten we de listener verwijderen in de methode componentWillUnmount().

Ten slotte retourneert render() hello door gebruik te maken van translate() en er de parameter key aan toe te voegen. Na deze stappen kan de applicatie "begrijpen" welke taal nodig is en berichten precies in die taal tonen.

Applicatie starten

Nu is het tijd om te testen hoe de vertaling werkt.

Laten we eerst de applicatie starten in de simulator of emulator door in te typen

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

Het zal er ongeveer zo uitzien:

Je kunt nu proberen de taal naar het Frans te veranderen en vervolgens de applicatie te starten.

Met de Arabische taal doen we hetzelfde, er is geen verschil.

Tot nu toe gaat alles goed.

Maar wat gebeurt er als je een willekeurige taal kiest waarvan de vertaling niet beschikbaar is in de applicatie?

Het blijkt dat de taak findBestLanguage is om de optimale vertaling uit alle beschikbare opties te bieden. Het resultaat zal de standaard ingestelde taal zijn.

Het gaat om de instellingen van de telefoon. Zo kun je in de iOS-emulator de volgorde van de talen bekijken.

Als de gekozen taal niet de voorkeurstaal is, geeft findBestAvailableLanguage undefined terug, zodat de standaard ingestelde taal wordt weergegeven.

Bonus

React-native-localize heeft een API die toegang biedt tot een groot aantal taalelementen. Voordat je begint met werken, is het goed om de documentatie door te nemen..

Conclusies

De applicatie kan zonder veel problemen meertalig gemaakt worden. React-native-localize is een uitstekende optie die het mogelijk maakt om de gebruikerskring van de applicatie uit te breiden.

De broncode van het project is hier te vinden..

Skillbox raadt aan:

Praktische tweejarenopleiding ‘Ik ben een PRO webdeveloper’.

Online cursus ‘C#-ontwikkelaar vanaf nul’.

Praktische jaaropleiding ‘PHP-developer van 0 tot PRO’.

Bron: habr.com