🥇Többnyelvű alkalmazást írunk a React Native |-ben ProHoster

A termékhonosítás nagyon fontos az új országokat és régiókat felfedező nemzetközi vállalatok számára. Hasonlóképpen lokalizálásra van szükség a mobil alkalmazásokhoz. Ha egy fejlesztő nemzetközi terjeszkedésbe kezd, fontos, hogy lehetőséget adjunk egy másik országból érkező felhasználóknak, hogy anyanyelvükön dolgozhassanak a felülettel. Ebben a cikkben egy React Native alkalmazást fogunk létrehozni a csomag segítségével react-native-localize.

A Skillbox a következőket ajánlja: Oktató online tanfolyam "Profession Java Developer".
Emlékeztetünk: a "Habr" minden olvasója számára - 10 000 rubel kedvezmény, ha a "Habr" promóciós kóddal bármely Skillbox tanfolyamra jelentkezik.

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

A cikk megértéséhez alapvető készségekre van szüksége a React Native használatához. A munkagép beállításainak megismeréséhez megteheti használja a hivatalos utasításokat.

A szoftvereszközök következő verzióira lesz szükségünk:

Node v10.15.0
npm 6.4.1
fonal 1.16.0
react-native 0.59.9
react-native-localize 1.1.3
i18n-js 3.3.0

Első lépések

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

$ react-native init multiLanguage
$ cd többnyelvű

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

Az első lépés a react-native-localize telepítése a következő beírásával:
$ yarn add react-native-localize

Ha problémák lépnek fel a telepítési folyamat során, Érdemes elolvasni a szerelési útmutatót.

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

Ez a cikk a felhasználást ismerteti I18n.js JavaScript-be történő fordítás érdekében.

$ fonal add i18n-js

Nos, mivel az i18n-js nem biztosít gyorsítótárat vagy memoizálást, javaslom a lodash.memoize használatát ehhez:

$ fonal add lodash.memoize

Fordításokkal való munka

Ahhoz, hogy az alkalmazás más nyelvekkel is működjön, először létre kell hoznia egy fordítási könyvtárat az src-n belül, majd három JSON-fájlt minden nyelvhez.

1. en.json angol nyelven;

2. fr.json franciául;

3. ar.json arab.

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

Az érték az a szöveg, amelyet meg kell jeleníteni a felhasználó számára.

Angol:

{"hello": "Hello World!"}

Французский

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

Арабский

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

Ugyanígy hozzáadhat más nyelveket is.

Fő kód

Ezen a ponton meg kell nyitnia az App.js fájlt, és hozzá kell adnia 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"; // Use for caching/memoize for better performance
 
import {
  I18nManager,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View
} from "react-native";

Ezt követően segédfunkciók és állandók kerülnek hozzáadásra, amelyek később hasznosak lesznek.

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

Nos, most hozzuk létre az App osztály egyik összetevőjét:

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

Az első elem, a setI18nConfig(), beállítja a kezdeti konfigurációt.

Ezután hozzá kell adni egy eseményfigyelőt a componentDidMount()-hoz, ez az elem figyeli a frissítéseket, és meghívja a handleLocalizationChange()-t, amikor azok bekövetkeznek.

A handleLocalizationChange() metódus aktiválja a setI18nConfig() és forceUpdate() függvényeket. Erre Android-eszközök esetén van szükség, mivel az összetevőt renderelni kell, hogy a változások észrevehetőek legyenek.

Ezután el kell távolítania a figyelést a componentWillUnmount() metódusból.

Végül a render() a hello-t adja vissza a translate() használatával és egy kulcsparaméter hozzáadásával. Ezen lépések után az alkalmazás képes lesz „megérteni”, hogy milyen nyelvre van szükség, és üzeneteket jeleníthet meg azon.

Alkalmazás indítása

Itt az ideje, hogy ellenőrizze, hogyan működik a fordítás.

Először gépeléssel elindítjuk az alkalmazást a szimulátorban vagy emulátorban

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

Valahogy így fog kinézni:

Most megpróbálhatja megváltoztatni a nyelvet franciára az alkalmazás elindításával.

Ugyanezt csináljuk az arabul is, nincs különbség.

Eddig jó.

De mi történik, ha olyan véletlenszerű nyelvet választ, amelyre nincs fordítás az alkalmazásban?

Kiderült, hogy a findBestLanguage feladata az optimális fordítás biztosítása az összes rendelkezésre álló közül. Ennek eredményeként az alapértelmezett nyelv jelenik meg.

A telefon beállításairól beszélünk. Például az iOS emulátorban láthatja a nyelvek sorrendjét.

Ha a kiválasztott nyelv nem a preferált nyelv, a findBestAvailableLanguage nem definiált értéket ad vissza, így az alapértelmezett nyelv jelenik meg.

Prémium

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

Álláspontja

Az alkalmazás probléma nélkül többnyelvűvé tehető. A React-native-localize nagyszerű lehetőség, amely lehetővé teszi az alkalmazás felhasználói bázisának bővítését.

Projekt forráskódja itt.

A Skillbox a következőket ajánlja:

Két éves gyakorlati tanfolyam "PRO webfejlesztő vagyok".

Online tanfolyam "C# fejlesztő a semmiből".

Gyakorlati évfolyam "PHP fejlesztő 0-tól PRO-ig".

Forrás: will.com

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