🥇Po shkruajmë një aplikacion shumëgjuhësh në React Native

Lokalizimi i produktit është shumë i rëndësishëm për kompanitë ndërkombëtare që eksplorojnë vende dhe rajone të reja. Në mënyrë të ngjashme, lokalizimi është i nevojshëm për aplikacionet celulare. Nëse një zhvillues fillon zgjerimin ndërkombëtar, është e rëndësishme t'u jepet përdoruesve nga një vend tjetër mundësinë për të punuar me ndërfaqen në gjuhën e tyre amtare. Në këtë artikull, ne do të krijojmë një aplikacion React Native duke përdorur paketën reagoj-vendas-lokalizoj.

Skillbox rekomandon: Kurs edukativ online "Profesioni zhvillues Java".
Kujtojmë: për të gjithë lexuesit e "Habr" - një zbritje prej 10 rubla kur regjistroheni në çdo kurs Skillbox duke përdorur kodin promovues "Habr".

Mjetet dhe aftësitë

Për të kuptuar këtë artikull, ju nevojiten aftësi themelore për të punuar me React Native. Për t'u njohur me cilësimet e makinës së punës, mundeni përdorni udhëzimet zyrtare.

Do të na duhen këto versione të mjeteve softuerike:

Nyja v10.15.0
npm 6.4.1
fije 1.16.0
react-native 0.59.9
reagoj-native-lokalizoj 1.1.3
i18n-js 3.3.0

Fillimi

Ne do të krijojmë një aplikacion që do të mbështesë anglisht, frëngjisht dhe arabisht. Së pari ne krijojmë një projekt të ri duke përdorur react-native-cli. Për ta bërë këtë, duhet të shkruani këtë në terminal:

$ react-native init multi language
$ cd shumëgjuhëshe

Shtimi i bibliotekave të nevojshme

Hapi i parë është të instaloni react-native-localize duke shtypur sa vijon:
$ fije shtoni react-native-localize

Nëse shfaqen probleme gjatë procesit të instalimit, Vlen të lexoni manualin e instalimit.

Biblioteka react-native-localize i jep zhvilluesit akses në veçoritë shumëgjuhëshe. Por ajo ka nevojë për një bibliotekë më shumë - i18n.

Ky artikull përshkruan përdorimin I18n.js për të ofruar përkthim në JavaScript.

$ fije shtoni i18n-js

Epo, meqenëse i18n-js nuk ofron caching ose memoizim, unë sugjeroj të përdorni lodash.memoize për këtë:

$ fije shtoni lodash.memoize

Puna me përkthime

Në mënyrë që aplikacioni të mund të punojë me gjuhë të tjera, fillimisht duhet të krijoni një direktori përkthimesh brenda src, pastaj tre skedarë JSON për secilën gjuhë.

1. en.json për anglisht;

2. fr.json për frëngjisht;

3. ar.json për arabisht.

Këta skedarë përmbajnë objekte JSON me çelësa dhe vlera. Çelësi do të jetë i njëjtë për secilën gjuhë. Përdoret nga aplikacioni për të shfaqur informacionin e tekstit.

Vlera është teksti që duhet t'i tregohet përdoruesit.

Anglisht:

{"hello": "Përshëndetje Botë!"}

Французский

{"përshëndetje": "Salut le Monde!"}

Арабский

{ "përshëndetje": "أهلاً بالعالم"}

Ju mund të shtoni gjuhë të tjera në të njëjtën mënyrë.

Kodi kryesor

Në këtë pikë, duhet të hapni skedarin App.js dhe të shtoni importe në të:

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

Pas kësaj, shtohen funksione dhe konstante ndihmëse që do të jenë të dobishme më vonë.

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

Epo, tani le të krijojmë një komponent të klasës së aplikacionit:

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

Elementi i parë, setI18nConfig(), vendos konfigurimin fillestar.

Pastaj ju duhet të shtoni një dëgjues të ngjarjeve në componentDidMount(), ky element do të dëgjojë përditësimet dhe do të thërrasë handleLocalizationChange() kur ato të ndodhin.

Metoda handleLocalizationChange() aktivizon setI18nConfig() dhe forceUpdate(). Kjo është e nevojshme për pajisjet Android pasi komponenti duhet të jepet që ndryshimet të jenë të dukshme.

Pastaj ju duhet të hiqni dëgjimin nga metoda componentWillUnmount().

Më në fund, render() kthen hello duke përdorur translate() dhe duke shtuar një parametër kyç në të. Pas këtyre hapave, aplikacioni do të jetë në gjendje të "kuptojë" se çfarë gjuhe nevojitet dhe të shfaqë mesazhe në të.

Nisja e aplikacionit

Tani është koha për të kontrolluar se si funksionon përkthimi.

Së pari, ne e hapim aplikacionin në simulator ose emulator duke shtypur

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

Do të duket diçka si kjo:

Tani mund të provoni ta ndryshoni gjuhën në frëngjisht duke hapur aplikacionin.

Ne bëjmë të njëjtën gjë me arabishten, nuk ka dallim.

Deri këtu mirë.

Por çfarë ndodh nëse zgjidhni një gjuhë të rastësishme për të cilën nuk ka përkthim në aplikacion?

Rezulton se detyra e findBestLanguage është të sigurojë përkthimin optimal nga të gjitha ato të disponueshme. Si rezultat, do të shfaqet gjuha e paracaktuar.

Po flasim për cilësimet e telefonit. Për shembull, në emulatorin iOS mund të shihni renditjen e gjuhëve.

Nëse gjuha e zgjedhur nuk është gjuha e preferuar, findBestAvailableLanguage kthehet e papërcaktuar në mënyrë që të shfaqet gjuha e paracaktuar.

Shpërblim

react-native-localize ka një API që ofron akses në një numër të madh elementesh gjuhësore. Para se të filloni punën, Ia vlen të shikoni dokumentacionin.

Gjetjet

Aplikacioni mund të bëhet shumëgjuhësh pa asnjë problem. React-native-localize është një opsion i shkëlqyeshëm që ju lejon të zgjeroni bazën e përdoruesve të aplikacionit tuaj.

Kodi burimor i projektit është këtu.

Skillbox rekomandon:

Kurse praktike dyvjeçare "Unë jam një zhvillues në internet PRO".

Kurs online "Zhvilluesi i C# nga e para".

Kursi praktik i vitit "Zhvilluesi PHP nga 0 në PRO".

Burimi: www.habr.com

Shkrimi i një aplikacioni shumëgjuhësh në React Native