🥇Mir schreiwen eng méisproocheg Applikatioun am React Native

Produktlokaliséierung ass ganz wichteg fir international Firmen déi nei Länner a Regiounen entdecken. Ähnlech ass Lokaliséierung fir mobil Uwendungen néideg. Wann en Entwéckler international Expansioun ufänkt, ass et wichteg Benotzer aus engem anere Land d'Méiglechkeet ze ginn mat der Interface an hirer Mammesprooch ze schaffen. An dësem Artikel erstelle mir eng React Native Applikatioun mam Package reagéieren-gebierteg-lokaliséieren.

Skillbox recommandéiert: Online pädagogesch Cours "Beruff Java Entwéckler".
Mir erënneren Iech: fir all Habr Lieser - eng Remise vun 10 Rubel wann Dir Iech an all Skillbox Cours aschreift mat dem Habr Promo Code.

Tools a Fäegkeeten

Fir dësen Artikel ze verstoen, braucht Dir Basiskompetenzen fir mat React Native ze schaffen. Fir Iech mat den Astellunge vun der Aarbechtsmaschinn vertraut ze maachen, kënnt Dir benotzen déi offiziell Instruktioune.

Mir brauchen dës Versioune vu Software Tools:

Node v10.15.0
npm 6.4.1
garen 1.16.0
reagéiert gebierteg 0.59.9
reagéieren-gebierteg-lokaliséieren 1.1.3
i18n-js 3.3.0

Getting started

Mir erstellen eng Applikatioun déi Englesch, Franséisch an Arabesch ënnerstëtzt. Als éischt kreéiere mir en neie Projet mat react-native-cli. Fir dëst ze maachen, musst Dir dëst am Terminal tippen:

$ reagéiert gebierteg init multiLanguage
$ cd multiLanguage

Füügt déi néideg Bibliothéiken

Den éischte Schrëtt ass fir react-native-localize z'installéieren andeems Dir déi folgend tippt:
$ yarn add react-native-localize

Wann Problemer während dem Installatiounsprozess optrieden, Et ass derwäert d'Installatiounshandbuch ze liesen.

D'react-native-localize Bibliothéik gëtt dem Entwéckler Zougang zu méisproochege Funktiounen. Awer hatt brauch eng méi Bibliothéik - i18n.

Dësen Artikel beschreift d'Benotzung I18n.js fir Iwwersetzung an JavaScript ze bidden.

$ yarn add i18n-js

Gutt, well i18n-js kee Caching oder Memoiséierung ubitt, proposéieren ech lodash.memoize fir dëst ze benotzen:

$ yarn add lodash.memoize

Schafft mat Iwwersetzungen

Fir datt d'Applikatioun fäeg ass mat anere Sproochen ze schaffen, musst Dir als éischt en Iwwersetzungsverzeechnes bannent src erstellen, dann dräi JSON Dateien fir all Sprooch.

1. en.json fir Englesch;

2. fr.json fir Franséisch;

3. ar.json fir Arabesch.

Dës Dateie enthalen JSON Objete mat Schlësselen a Wäerter. De Schlëssel wäert fir all Sprooch d'selwecht sinn. Et gëtt vun der Applikatioun benotzt fir Textinformatioun ze weisen.

Wäert ass den Text deen dem Benotzer gewise muss ginn.

Englesch:

{"hello": "Hallo Welt!"}

Franséisch

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

Arabesch

{ "Hallo": "Hallo"}

Dir kënnt aner Sproochen op déiselwecht Manéier addéieren.

Haaptsäit Code

Zu dësem Zäitpunkt musst Dir d'App.js Datei opmaachen an Importer derbäi addéieren:

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

Duerno ginn Hëllefsfunktiounen a Konstanten bäigefüügt, déi spéider nëtzlech sinn.

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

Gutt, loosst eis elo e Bestanddeel vun der App Klass erstellen:

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

Dat éischt Element, setI18nConfig (), setzt déi initial Konfiguratioun.

Da musst Dir en Eventnolauschterer op componentDidMount (), dëst Element lauschtert fir Aktualiséierungen a rufft handleLocalizationChange () wann se geschéien.

D'handleLocalizationChange () Method aktivéiert setI18nConfig () an forceUpdate (). Dëst ass noutwendeg fir Android Apparater well d'Komponente muss gemaach ginn fir datt d'Ännerunge bemierkbar sinn.

Da musst Dir d'Nolauschteren vun der componentWillUnmount () Method ewechhuelen.

Endlech, Render- () stellt Hallo zréck andeems Dir iwwersetze benotzt () an e Schlësselparameter bäidréit. No dëse Schrëtt wäert d'Applikatioun fäeg sinn "verstoen" wéi eng Sprooch gebraucht gëtt a Messagen dran weisen.

Applikatioun starten

Elo ass d'Zäit fir ze kontrolléieren wéi d'Iwwersetzung funktionnéiert.

Als éischt lancéiere mir d'Applikatioun am Simulator oder Emulator andeems Dir tippt

$ reagéiert gebierteg Run-ios
$ reagéieren-gebierteg Run-Android

Et wäert sou eppes ausgesinn:

Elo kënnt Dir probéieren d'Sprooch op Franséisch z'änneren andeems Dir d'Applikatioun lancéiert.

Mir maachen déi selwecht Saach mat Arabesch, et gëtt keen Ënnerscheed.

Sou wäit sou gutt.

Awer wat geschitt wann Dir eng zoufälleg Sprooch wielt fir déi et keng Iwwersetzung an der Applikatioun gëtt?

Et stellt sech eraus datt d'Aufgab vun findBestLanguage ass déi optimal Iwwersetzung vun all verfügbaren ze bidden. Als Resultat gëtt d'Standardsprooch ugewisen.

Mir schwätzen iwwer Telefon Astellunge. Zum Beispill, am iOS Emulator kënnt Dir d'Uerdnung vun de Sprooche gesinn.

Wann déi gewielte Sprooch net déi léifste Sprooch ass, gëtt findBestAvailableLanguage ondefinéiert zréck, sou datt d'Standardsprooch ugewise gëtt.

Bonus

react-native-localize huet eng API déi Zougang zu enger grousser Zuel vu Sproochelementer ubitt. Ier Dir ufänkt ze schaffen, Et ass derwäert d'Dokumentatioun ze kontrolléieren.

Conclusiounen

D'Applikatioun kann ouni Probleemer méisproocheg gemaach ginn. React-native-localize ass eng super Optioun déi Iech erlaabt d'Benotzerbasis vun Ärer App auszebauen.

Projet Quellcode ass hei.

Skillbox recommandéiert:

Zwee-Joer praktesch Cours "Ech sinn e PRO Webentwéckler".

Online Cours "C# Entwéckler vun Null".

Praktesch ee Joer Cours "PHP Entwéckler vun 0 bis PRO".

Source: will.com

Schreift eng méisproocheg Applikatioun am React Native