🥇Többnyelvű alkalmazás írása React Native-ban

A termékek lokalizálása nagyon fontos a nemzetközi vállalatok számára, amelyek új országokba és régiókba lépnek be. Hasonlóképpen, a lokalizálásra szükség van a mobilalkalmazásoknál is. Amikor a fejlesztő nemzetközi terjeszkedésbe kezd, fontos, hogy más országok felhasználóinak lehetőséget adjunk arra, hogy anyanyelvükön dolgozzanak az interfésszel. Ebben a cikkben létrehozunk egy React Native alkalmazást a következő csomag használatával: react-native-localize.

A Skillbox ajánlja: Oktatási online kurzus "Java-Fejlesztő Mesterség".
Emlékeztetjük: minden «Habr» olvasónak 10 000 rubeles kedvezmény jár bármely Skillbox kurzus jelentkezésekor a «Habr» promóciós kód felhasználásával.

Eszközök és készségek

A cikk megértéséhez alapvető React Native ismeretek szükségesek. A munkakörnyezet beállításáról a hivatalos útmutatót.

használhatjuk. A következő programeszközök verzióira lesz szükségünk:

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

Kezdünk

Létrehozunk egy alkalmazást, amely támogatja az angol, francia és arab nyelveket. Először létrehozunk egy új projektet a react-native-cli használatával. Ehhez a terminálba a következőt kell beírni:

$ react-native init multiLanguage
$ cd multiLanguage

Szükséges könyvtárak hozzáadása

Először telepítenünk kell a react-native-localize-t az alábbiak beírásával:
$ yarn add react-native-localize

Ha telepítés közben problémák merülnek fel, érdemes tanulmányozni a telepítési útmutatót..

A react-native-localize könyvtár hozzáférést biztosít a fejlesztőknek a többnyelvű funkciókhoz. De szüksége van egy másik könyvtárra is – az i18n-re.

A cikk a I18n.js JavaScript nyelvű fordítás biztosítására vonatkozó használatát írja le.

$ yarn add i18n-js

Mivel az i18n-js nem kínál cache-elést vagy memoizálást, úgy vélem, hogy a lodash.memoize használata lenne a legjobb megoldás:

$ yarn add lodash.memoize

Fordítások kezelése

Ahhoz, hogy az alkalmazás más nyelvekkel is működjön, először hozzunk létre egy translations mappát a src-en belül, majd három JSON fájlt minden nyelvhez.

1. en.json az angolhoz;

2. fr.json a franciához;

3. ar.json az arabhoz.

Ezek a fájlok JSON objektumokat tartalmaznak kulcsokkal és értékekkel. A kulcs minden nyelv esetében ugyanaz lesz. Az alkalmazás ezt használja a szöveges információk megjelenítésére.

Az érték (value) – az a szöveg, amelyet a felhasználónak meg kell mutatni.

Angol nyelv:

{ "hello": "Hello World!"}

Francia nyelv

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

Arab nyelv

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

Hasonló módon más nyelveket is hozzáadhatunk.

Alap kód

Ezen a ponton nyissa meg az App.js fájlt, és adja hozzá az importálást:

import React from "react";
import * as RNLocalize from "react-native-localize";
import i18n from "i18n-js";
import memoize from "lodash.memoize"; // Használja a gyorsításhoz/memoizáláshoz a jobb teljesítmény érdekében
 
import {
  I18nManager,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View
} from "react-native";

Ezután segédfunkciókat és konstansokat adunk hozzá, amelyek később hasznosak lesznek.

const translationGetters = {
  // késleltetett igények (a metro bundler nem támogatja a symlinkeket)
  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 = () => {
  // visszaesés, ha nincs elérhető nyelv
  const fallback = { languageTag: "en", isRTL: false };
 
  const { languageTag, isRTL } =
    RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
    fallback;
 
  // törli a fordítási gyorsítótárat
  translate.cache.clear();
  // frissíti az elrendezési irányt
  I18nManager.forceRTL(isRTL);
  // beállítja az i18n-js konfigurációt
  i18n.translations = { [languageTag]: translationGetters[languageTag]() };
  i18n.locale = languageTag;
};

Most létrehozzuk az App osztálykomponensét:

export default class App extends React.Component {
  constructor(props) {
    super(props);
    setI18nConfig(); // az alapértelmezett konfiguráció beállítása
  }
 
  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
  }
});

Az első elem — setI18nConfig() — beállítja az alapértelmezett konfigurációt.

Ezután a componentDidMount() metódusban hozzá kell adni az eseményfigyelőt, amely nyomon követi a frissítéseket és meghívja a handleLocalizationChange()-t, amikor azok megtörténnek.

A handleLocalizationChange() metódus aktiválja a setI18nConfig()-ot és a forceUpdate()-ot. Ez szükséges Android-eszközök esetén, mert a komponensnek újra kell renderelnie, hogy a változások láthatóvá váljanak.

Ezután el kell távolítani a hallgatót a componentWillUnmount() metódusból.

Végül a render() metódus visszaadja a hello-t a translate() használatával és a kulcs paraméter hozzáadásával. Ezek után az alkalmazás képes lesz "érteni", hogy melyik nyelvre van szükség, és az üzeneteket úgy jeleníti meg.

Az alkalmazás elindítása

Most itt az ideje megnézni, hogyan működik a fordítás.

Először indítsuk el az alkalmazást egy szimulátorban vagy emulátorban a következő parancsok begépelésével:

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

Ez körülbelül így fog kinézni:

Most már megpróbálhatjuk megváltoztatni a nyelvet franciára, majd elindítani az alkalmazást.

Az arab nyelvvel ugyanazt csináljuk, nincs különbség.

Jelenleg minden rendben van.

De mi történik, ha egy véletlenszerű nyelvet választunk, amelynek nincs fordítása az alkalmazásban?

Kiderül, hogy a findBestLanguage feladatának az összes elérhető fordítás közül a legjobbat kell biztosítania. Ennek eredményeként az alapértelmezett nyelv fog megjelenni.

A telefon beállításairól van szó. Például az iOS emulátorban megnézhetjük a nyelvek sorrendjét.

Ha a választott nyelv nem a preferált, a findBestAvailableLanguage undefined-ot ad vissza, így az alapértelmezett nyelvet mutatja.

Bónusz

A react-native-localize API-t kínál, amely hozzáférést biztosít számos nyelvi elemhez. Mielőtt elkezdenénk a munkát, érdemes átnézni a dokumentációt..

Következtetések

Az alkalmazás többnyelvűvé tehető különösebb problémák nélkül. A React-native-localize egy nagyszerű lehetőség, amely lehetővé teszi az alkalmazás felhasználóinak körének bővítését.

A projekt forráskódja itt található..

A Skillbox ajánlja:

Kétéves gyakorlati tanfolyam „Webfejlesztő PRO”.

Online kurzus „C# fejlesztő a nulláról”.

Gyakorlati éves kurzus „PHP fejlesztő a nullától a PROig”.

Forrás: habr.com

Többnyelvű alkalmazás írása React Native segítségével