Multilinguale Anwendung mit React Native entwickeln

Die Lokalisierung von Produkten ist für internationale Unternehmen, die neue Länder und Regionen erschließen, von großer Bedeutung. Ähnlich verhält es sich mit der Lokalisierung von mobilen Anwendungen. Wenn ein Entwickler in die internationale Expansion eintritt, ist es wichtig, den Nutzern aus anderen Ländern die Nutzung der Benutzeroberfläche in ihrer Muttersprache zu ermöglichen. In diesem Artikel erstellen wir eine React Native-Anwendung, die das Paket react-native-localize.

Skillbox empfiehlt: Online-Bildungskurs 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

Um diesen Artikel zu verstehen, sind grundlegende Kenntnisse in React Native erforderlich. Für Informationen zur Konfiguration der Arbeitsumgebung können Sie die offizielle Anleitung.

benutzen. Wir benötigen die folgenden 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 werden eine Anwendung erstellen, die Englisch, Französisch und Arabisch unterstützt. Zuerst erstellen wir ein neues Projekt, indem wir react-native-cli verwenden. Dazu geben wir im Terminal Folgendes ein:

$ react-native init multiLanguage
$ cd multiLanguage

Wir fügen die notwendigen 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, Es lohnt sich, das Installationshandbuch zu studieren..

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

Im Artikel wird die Verwendung beschrieben I18n.js um Übersetzungen in JavaScript bereitzustellen.

$ yarn add i18n-js

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

$ yarn add lodash.memoize

Arbeiten mit Übersetzungen

Damit die Anwendung auch mit anderen Sprachen arbeiten kann, müssen Sie zuerst ein Verzeichnis "translations" innerhalb von src erstellen und dann drei JSON-Dateien für jede Sprache anlegen.

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 bleibt für jede Sprache gleich. 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 die gleiche Weise können weitere Sprachen hinzugefügt werden.

Hauptcode

An dieser Stelle öffnen Sie die Datei App.js und fügen Sie den Import hinzu:

import React from "react";
import * as RNLocalize from "react-native-localize";
import i18n from "i18n-js";
import memoize from "lodash.memoize"; 

// Verwenden für Caching/memoize für bessere Leistung
import {
  I18nManager,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View
} from "react-native";

Als Nächstes fügen wir Hilfsfunktionen und Konstanten hinzu, die später nützlich sein werden.

const translationGetters = {
  // Lazy requires (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, falls 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;
};

Jetzt erstellen wir die Klassenkomponente App:

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 (
      
        {translate("hello")}
      
    );
  }
}
 
const styles = StyleSheet.create({
  safeArea: {
    backgroundColor: "white",
    flex: 1,
    alignItems: "center",
    justifyContent: "center"
  },
  value: {
    fontSize: 18
  }
});

Das erste Element – setI18nConfig() – legt die Anfangskonfiguration fest.

Dann muss in componentDidMount() ein Event-Listener hinzugefügt werden. Dieses Element wird Updates verfolgen und handleLocalizationChange() aufrufen, wenn Änderungen eintreten.

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 Event-Listener im componentWillUnmount() entfernt werden.

Schließlich wird in render() hello durch die Verwendung von translate() und das Hinzufügen des Parameters key zurückgegeben. Nach diesen Schritten kann die Anwendung „verstehen“, welche Sprache benötigt wird, und die Nachrichten in genau dieser anzeigen.

App starten

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

Zuerst starten wir die Anwendung im Simulator oder Emulator mit dem Befehl

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

So wird es ungefähr aussehen:

Jetzt können wir versuchen, die Sprache auf Französisch zu ändern und die Anwendung anschließend zu starten.

Mit der arabischen Sprache machen wir das Gleiche, der Unterschied ist derselbe.

Bisher läuft alles gut.

Aber was passiert, wenn eine zufällige Sprache ausgewählt wird, 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 anzubieten. Infolgedessen wird die Sprache angezeigt, die als Standard festgelegt wurde.

Es geht um die Telefon-Einstellungen. Zum Beispiel kann man im iOS-Emulator die Reihenfolge der Sprachen überprüfen.

Wenn die gewählte Sprache nicht die bevorzugte ist, gibt findBestAvailableLanguage undefined zurück, sodass die Sprache angezeigt wird, die als Standard festgelegt ist.

Bonus

React-native-localize bietet eine API, die Zugriff auf zahlreiche sprachliche Elemente gewährt. Bevor Sie beginnen, sollten Sie die Dokumentation durchsehen.

Fazit

Es ist einfach, eine mehrsprachige Anwendung zu erstellen. React-native-localize ist eine hervorragende Wahl, um die Nutzerbasis der Anwendung zu erweitern.

Der Quellcode des Projekts finden Sie hier.

Skillbox empfiehlt:

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

Quelle: habr.com