🥇Mēs rakstām daudzvalodu lietotni uz React Native

Produktu lokalizācija ir ļoti svarīga starptautiskajām uzņēmumiem, kas iekaro jaunas valstis un reģionus. Līdzīgi lokalizācija ir nepieciešama arī mobilajām lietotnēm. Ja izstrādātājs sāk starptautisko ekspansiju, ir svarīgi dot lietotājiem no citas valsts iespēju strādāt ar interfeisu dzimtajā valodā. Šajā rakstā mēs izveidosim React Native lietotni, izmantojot pakotni react-native-localize.

Skillbox iesaka: Izglītības tiešsaistes kurss «Profesionāls Java izstrādātājs».
Atgādinām: visiem «Habr» lasītājiem — atlaide 10 000 rubļu reģistrējoties jebkurā Skillbox kursā ar promo kodu «Habr».

Rīki un prasmes

Lai saprastu šo rakstu, ir nepieciešamas pamata prasmes darbā ar React Native. Lai iepazītos ar darba vides iestatījumus, var izmantojiet oficiālo instrukciju.

Mums būs nepieciešamas šādas programmatūras versijas:

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

Sākam

Mēs izveidosim lietotni, kas atbalsta angļu, franču un arābu valodas. Vispirms izveidojam jaunu projektu, izmantojot react-native-cli. Lai to izdarītu, terminālī jāraksta šādi:

$ react-native init multiLanguage
$ cd multiLanguage

Pievienojam nepieciešamās bibliotēkas

Vispirms ir jāinstalē react-native-localize, ierakstot sekojošo:
$ yarn add react-native-localize

Ja instalēšanas procesā rodas problēmas, ir vērts izpētīt instalācijas rokasgrāmatu.

Bibliotēka react-native-localize sniedz izstrādātājam piekļuvi multivalodu funkcijām. Bet tai ir nepieciešama vēl viena bibliotēka — i18n.

Rakstā aprakstīta izmantošana I18n.js lai nodrošinātu tulkošanu JavaScript.

$ yarn add i18n-js

Un, jo i18n-js nesniedz kešošanu vai memoizāciju, es piedāvāju to izmantot ar lodash.memoize:

$ yarn add lodash.memoize

Darbs ar tulkojumiem

Lai lietotne varētu strādāt ar citām valodām, vispirms jāizveido katalogs translations iekš src, pēc tam — trīs JSON failus, katram no valodām.

1. en.json angļu valodai;

2. fr.json franču valodai;

3. ar.json arābu valodai.

Šie faili satur JSON objektus ar atslēgām un vērtībām. Atslēga būs viena un tā pati katrai valodai. To lieto lietotne, lai attēlotu teksta informāciju.

Vērtība (value) — tas ir teksts, kas jārāda lietotājam.

Angļu valoda:

{ "hello": "Hello World!"}

Franču valoda

{ «hello»: «Sveika pasaule!»}

Arābu

{ «hello»: «مرحبا بالعالم»}

Līdzīgi var pievienot arī citus valodas.

Pamatkods

Šajā posmā jāatver fails App.js un jāpievieno imports:

import React from "react";
import * as RNLocalize from "react-native-localize";
import i18n from "i18n-js";
import memoize from "lodash.memoize"; // Izmanto, lai kešotu/memoizētu labākai veiktspējai
 
import {
  I18nManager,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View
} from "react-native";

Pēc tam pievieno palīgfunkcijas un konstantas, kas būs noderīgas vēlāk.

const translationGetters = {
  // slinkas prasības (metro bundler neatbalsta simbola saites)
  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 = () => {
  // noklusējums, ja nav pieejama valoda
  const fallback = { languageTag: "en", isRTL: false };
 
  const { languageTag, isRTL } =
    RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
    fallback;
 
  // notīrīt tulkošanas kešu
  translate.cache.clear();
  // atjaunot izkārtojuma virzienu
  I18nManager.forceRTL(isRTL);
  // iestatīt i18n-js konfigurāciju
  i18n.translations = { [languageTag]: translationGetters[languageTag]() };
  i18n.locale = languageTag;
};

Tagad izveidosim Clasa App komponentu:

export default class App extends React.Component {
  constructor(props) {
    super(props);
    setI18nConfig(); // iestatīt sākotnējo konfigurāciju
  }
 
  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
  }
});

Pirmais elements — setI18nConfig() — iestata sākotnējo konfigurāciju.

Pēc tam componentDidMount() jāpieprasa notikumu pārvietošana, šis elements sekos atjauninājumiem un izsauks handleLocalizationChange(), kad tie notiks.

Metode handleLocalizationChange() aktivizē setI18nConfig() un forceUpdate(). Tas ir nepieciešams Android ierīcēm, jo komponentei jābūt attēlotai, lai izmaiņas būtu redzamas.

Pēc tam jānoņem klausīšanās no komponenta componentWillUnmount() metode.

Visbeidzot, render() atvadās hello, izmantojot translate() un pievienojot tam atslēgas parametru. Pēc šīm darbībām lietotne varēs "saprast", kura valoda ir nepieciešama, un rādīt ziņas tieši tajā.

Lietotnes palaišana

Tagad ir īstais brīdis pārbaudīt, kā darbojas tulkojums.

Vispirms palaižam lietotni simulatorā vai emulatorā, ierakstot

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

Tas izskatīsies apmēram tā:

Tagad varam mēģināt mainīt valodu uz franču, pēc tam palaižot lietotni.

Ar arābu valodu darām to pašu, nekas neiznāk.

Līdz šim viss norit labi.

Bet kas notiks, ja izvēlēsimies nejaušu valodu, kuras tulkojuma lietotnē nav?

Izrādās, uzdevums findBestLanguage ir nodrošināt visoptimālāko no visiem pieejamajiem tulkojumiem. Tādējādi tiks rādīta valoda, kas ir iestatīta noklusēta.

Runājot par telefona iestatījumiem. Piemēram, iOS emulatorā var pārbaudīt valodu secību.

Ja izvēlētā valoda nav preferēta, findBestAvailableLanguage atgriež undefined, tāpēc tiek rādīta tā valoda, kas ir iestatīta noklusēta.

Bonuss

React-native-localize ir API, kas nodrošina piekļuvi lielam valodu elementu skaitam. Pirms sākt darbu, iedomājies par dokumentāciju.

Secinājumi

Lietotni var izveidot daudzvalodu bez īpašām problēmām. React-native-localize ir lieliska izvēle, kas ļauj paplašināt lietotnes lietotāju loku.

Projektā esošais kods atrodas šeit.

Skillbox iesaka:

Divu gadu praktiskais kurss „Es esmu PRO tīmekļa izstrādātājs”.

Tiešsaistes kurss „C# izstrādātājs no nulles”.

Praktiskais gada kurss „PHP izstrādātājs no 0 līdz PRO”.

Avots: habr.com

Rakstām multivalodu lietotni React Native