Wir erstellen eine mehrsprachige Anwendung mit React Native

Die Lokalisierung von Produkten ist für internationale Unternehmen, die neue Länder und Regionen erschließen, sehr wichtig. Ebenso ist die Lokalisierung für mobile Anwendungen erforderlich. Wenn ein Entwickler mit der internationalen Expansion beginnt, ist es wichtig, den Nutzern aus einem anderen Land die Möglichkeit zu geben, die Benutzeroberfläche in ihrer Muttersprache zu nutzen. In diesem Artikel werden wir eine React Native-Anwendung erstellen, unter Verwendung des Pakets react-native-localize.

Skillbox empfiehlt: Online-Kurs „Beruf Java-Entwickler“.
Wir erinnern daran: alle Leser von „Habr“ erhalten einen Rabatt von 10.000 Rubel bei der Anmeldung zu einem beliebigen Kurs von Skillbox mit dem Aktionscode „Habr“.

Werkzeuge und Fähigkeiten

Für das Verständnis dieses Artikels sind grundlegende Kenntnisse im Umgang mit React Native erforderlich. Zur Einarbeitung in die Einstellungen der Arbeitsmaschine kann man die offizielle Anleitung nutzen.

Wir benötigen folgende Versionen der Software-Tools:

• 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

Starten wir

Wir werden eine Anwendung erstellen, die Englisch, Französisch und Arabisch unterstützt. Zuerst erstellen wir ein neues Projekt mit react-native-cli. Dazu muss im Terminal Folgendes eingegeben werden:

$ react-native init multiLanguage
$ cd multiLanguage

Fügen Sie die erforderlichen Bibliotheken hinzu

Zuerst müssen wir react-native-localize installieren, indem wir Folgendes eingeben:
$ yarn add react-native-localize

Falls während der Installation Probleme auftreten, sollte das Installationshandbuch studiert werden.

Die Bibliothek react-native-localize gibt dem Entwickler Zugriff auf mehrsprachige Funktionen. Aber sie benötigt eine weitere Bibliothek – i18n.

Im Artikel wird die Verwendung beschrieben I18n.js um Übersetzungen in JavaScript zu gewährleisten.

$ yarn add i18n-js

Da i18n-js jedoch keine Caching- oder Memoisierungsfunktionen bietet, empfehle ich die Verwendung von lodash.memoize dafür:

$ yarn add lodash.memoize

Arbeiten mit Übersetzungen

Um sicherzustellen, dass die Anwendung auch mit anderen Sprachen arbeiten kann, muss zunächst ein Verzeichnis translations innerhalb von src erstellt werden, dann — drei JSON-Dateien für jede Sprache.

1. en.json für Englisch;

2. fr.json für Französisch;

3. ar.json für Arabisch.

Diese Dateien enthalten JSON-Objekte mit Schlüsseln und Werten. Der Schlüssel wird für jede Sprache gleich sein. Er wird von der Anwendung verwendet, um Textinformationen anzuzeigen.

Der Wert (value) ist der Text, der dem Benutzer angezeigt werden soll.

Englisch:

{ "hello": "Hello World!"}

Französisch

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

Arabisch

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

Auf ähnliche Weise können weitere Sprachen hinzugefügt werden.

Hauptcode

An diesem Punkt müssen Sie die Datei App.js öffnen und den Import hinzufügen:

import React from "react";
import * as RNLocalize from "react-native-localize";
import i18n from "i18n-js";
import memoize from "lodash.memoize"; // Verwenden Sie dies für Caching/memoize für bessere Leistung
 
import {
  I18nManager,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View
} from "react-native";

Danach werden Hilfsfunktionen und Konstanten hinzugefügt, die später nützlich sein werden.

const translationGetters = {
  // verzögerte Anforderungen (Metro-Bundler unterstützt keine 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, wenn keine verfügbare Sprache passt
  const fallback = { languageTag: "en", isRTL: false };
 
  const { languageTag, isRTL } =
    RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
    fallback;
 
  // Übersetzungscache leeren
  translate.cache.clear();
  // Layout-Richtung aktualisieren
  I18nManager.forceRTL(isRTL);
  // i18n-js-Konfiguration setzen
  i18n.translations = { [languageTag]: translationGetters[languageTag]() };
  i18n.locale = languageTag;
};

Und jetzt erstellen wir die Klasse App:

export default class App extends React.Component {
  constructor(props) {
    super(props);
    setI18nConfig(); // Anfangskonfiguration setzen
  }
 
  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
  }
});

Der erste Punkt – setI18nConfig() – legt die Anfangskonfiguration fest.

Dann muss in componentDidMount() ein Ereignislistener hinzugefügt werden; dieses Element wird Aktualisierungen verfolgen und handleLocalizationChange() aufrufen, wenn sie stattfinden.

Die Methode handleLocalizationChange() aktiviert setI18nConfig() und forceUpdate(). Dies ist notwendig für Android-Geräte, da die Komponente gerendert werden muss, damit die Änderungen sichtbar werden.

Dann muss das Abhören im componentWillUnmount() entfernt werden.

Schließlich wird in render() das Wort hello zurückgegeben, indem translate() verwendet und der Parameter key hinzugefügt wird. Nach diesen Schritten wird die App "verstehen", welche Sprache benötigt wird, und die Nachrichten entsprechend anzeigen.

Start der Anwendung

Jetzt ist es an der Zeit zu prüfen, wie die Übersetzung funktioniert.

Zuerst starten wir die Anwendung im Simulator oder Emulator, indem wir eingeben

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

So wird es ungefähr aussehen:

Jetzt kann man versuchen, die Sprache auf Französisch zu wechseln, indem man dann die Anwendung startet.

Mit der arabischen Sprache machen wir dasselbe, da gibt es keinen Unterschied.

Bisher läuft alles gut.

Was passiert jedoch, wenn man eine zufällige Sprache auswählt, für die es keine Übersetzung in der Anwendung gibt?

Es stellt sich heraus, dass die Aufgabe von findBestLanguage darin besteht, die optimale Übersetzung aus allen verfügbaren zu liefern. Als Ergebnis wird die Sprache angezeigt, die standardmäßig eingestellt wurde.

Es geht um die Einstellungen des Telefons. Beispielsweise kann man im iOS-Emulator die Reihenfolge der Sprachen ansehen.

Wenn die gewählte Sprache nicht bevorzugt ist, gibt findBestAvailableLanguage undefined zurück, sodass die Sprache angezeigt wird, die standardmäßig eingestellt ist.

Bonus

react-native-localize hat eine API, die den Zugriff auf eine große Anzahl von Sprachelementen ermöglicht. Bevor man mit der Arbeit beginnt, sollte man sich mit der Dokumentation vertraut machen..

Das DBMS Tarantool ist ein attraktives, zukunftsträchtiges Produkt zur Erstellung von hochbelasteten Anwendungen.

Die Anwendung kann ohne große Probleme mehrsprachig gestaltet werden. React-native-localize ist eine hervorragende Option, die es ermöglicht, den Benutzerkreis der Anwendung zu erweitern.

Der Quellcode des Projekts ist hier..

Skillbox empfiehlt:

• Zweijähriger praktischer Kurs „Ich bin ein Webentwickler PRO“.
• Online-Kurs „C#-Entwickler von Grund auf“.
• Praktischer Jahreskurs „PHP-Entwickler von 0 bis PRO“.

Quelle: habr.com