🥇Wir schreiben eine mehrsprachige Anwendung auf React Native

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

Skillbox empfiehlt: Pädagogischer Online-Kurs „Beruf Java-Entwickler“.
Erinnerung: für alle Leser von „Habr“ – ein Rabatt von 10 Rubel bei der Anmeldung zu einem beliebigen Skillbox-Kurs mit dem Aktionscode „Habr“.

Werkzeuge und Fähigkeiten

Um diesen Artikel zu verstehen, sind grundlegende React Native-Kenntnisse erforderlich. Sie können sich mit den Einstellungen der Arbeitsmaschine vertraut machen Verwenden Sie offizielle Anweisungen.

Wir benötigen diese Versionen von Softwaretools:

Knoten v10.15.0
npm 6.4.1
Garn 1.16.0
React-Native 0.59.9
React-Native-Localize 1.1.3
i18n-js 3.3.0

Erste Schritte

Wir erstellen eine Anwendung, die Englisch, Französisch und Arabisch unterstützt. Zuerst erstellen wir ein neues Projekt mit React-Native-Cli. Dazu müssen Sie im Terminal Folgendes eingeben:

$ React-Native Init MultiLanguage
$ cd mehrsprachig

Hinzufügen der erforderlichen Bibliotheken

Der erste Schritt besteht darin, „react-native-localize“ zu installieren, indem Sie Folgendes eingeben:
$ Garn React-Native-Localize hinzufügen

Sollten während des Installationsvorgangs Probleme auftreten, Schauen Sie sich die Installationsanleitung an.

Die React-Native-Localize-Bibliothek ermöglicht dem Entwickler Zugriff auf mehrsprachige Funktionen. Aber sie braucht eine andere Bibliothek – i18n.

Der Artikel beschreibt die Verwendung I18n.js um eine Übersetzung in JavaScript bereitzustellen.

$ Garn i18n-js hinzufügen

Da i18n-js kein Caching oder Memoisieren bietet, empfehle ich hierfür die Verwendung von lodash.memoize:

$ Garn lodash.memoize hinzufügen

Arbeiten mit Übersetzungen

Damit die Anwendung gut mit anderen Sprachen funktioniert, müssen Sie zunächst ein Übersetzungsverzeichnis in src und dann drei JSON-Dateien für jede der Sprachen erstellen.

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 ist für jede Sprache derselbe. Es wird von der Anwendung verwendet, um Textinformationen anzuzeigen.

Wert (Wert) ist der Text, der dem Benutzer angezeigt werden muss.

Englische Sprache:

{ "hello": "Hallo Welt!"}

Französisch

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

Arabisch

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

Weitere Sprachen können auf die gleiche Weise hinzugefügt werden.

Haupt code

An dieser Stelle müssen Sie die Datei App.js öffnen und Importe hinzufügen:

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

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

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

Nun erstellen wir eine Komponente der App-Klasse:

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

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

Dann müssen wir einen Ereignis-Listener zu „componentDidMount()“ hinzufügen. Dieses Element wartet auf Aktualisierungen und ruft „handleLocalizationChange()“ auf, wenn diese auftreten.

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

Dann müssen wir den Listener aus der Methode „componentWillUnmount()“ entfernen.

Schließlich wird „hello“ in „render()“ zurückgegeben, indem „translate()“ verwendet und ein Schlüsselparameter hinzugefügt wird. Nach diesen Schritten kann die Anwendung „verstehen“, welche Sprache benötigt wird, und Nachrichten darin anzeigen.

Anwendungsstart

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

Zuerst führen wir die Anwendung im Simulator oder Emulator durch Eingabe aus

$ React-Native Run-ios
$ React-Native Run-Android

Es wird ungefähr so aussehen:

Jetzt können Sie versuchen, die Sprache auf Französisch zu ändern, indem Sie die Anwendung starten.

Das Gleiche machen wir mit der arabischen Sprache, es gibt keinen Unterschied.

Bisher läuft alles gut.

Aber was passiert, wenn Sie eine zufällige Sprache auswählen, für die es in der App keine Übersetzung gibt?

Es stellt sich heraus, dass die Aufgabe von findBestLanguage darin besteht, die bestmögliche Übersetzung unter allen verfügbaren Übersetzungen bereitzustellen. Als Ergebnis wird die standardmäßig eingestellte Sprache angezeigt.

Es geht um Telefoneinstellungen. So können Sie beispielsweise im iOS-Emulator die Reihenfolge der Sprachen sehen.

Wenn die ausgewählte Sprache nicht die bevorzugte Sprache ist, gibt findBestAvailableLanguage undefiniert zurück, sodass die Standardsprache angezeigt wird.

Bonus

React-native-localize verfügt über eine API, die Zugriff auf eine große Anzahl von Sprachelementen ermöglicht. Bevor Sie mit der Arbeit beginnen, Es lohnt sich, die Dokumentation zu lesen.

Befund

Die Bewerbung kann problemlos mehrsprachig gestaltet werden. React-native-localize ist eine großartige Option, mit der Sie den Benutzerkreis Ihrer Anwendung erweitern können.

Quellcode des Projekts ist hier.

Skillbox empfiehlt:

Zweijähriges Praktikum „Ich bin ein PRO-Webentwickler“.

Online Kurs „C#-Entwickler von Grund auf“.

Praktisches Jahr „PHP-Entwickler von 0 bis PRO“.

Source: habr.com

Wir schreiben eine mehrsprachige Anwendung auf React Native