🥇Mēs rakstām daudzvalodu lietojumprogrammu pakalpojumā React Native

Produktu lokalizācija ir ļoti svarīga starptautiskajiem uzņēmumiem, kas pēta jaunas valstis un reģionus. Tāpat ir nepieciešama lokalizācija mobilajām lietojumprogrammām. Ja izstrādātājs sāk starptautisku paplašināšanos, ir svarīgi sniegt lietotājiem no citas valsts iespēju strādāt ar saskarni viņu dzimtajā valodā. Šajā rakstā mēs izveidosim React Native lietojumprogrammu, izmantojot paketi reaģēt-dzimtā-lokalizēt.

Skillbox iesaka: Izglītojošs tiešsaistes kurss "Java izstrādātāja profesija".
Atgādinām: visiem "Habr" lasītājiem - atlaide 10 000 rubļu, reģistrējoties jebkurā Skillbox kursā, izmantojot "Habr" reklāmas kodu.

Instrumenti un prasmes

Lai saprastu šo rakstu, jums ir nepieciešamas pamatprasmes darbā ar React Native. Lai iepazītos ar darba mašīnas iestatījumiem, varat izmantojiet oficiālos norādījumus.

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

Mezgls v10.15.0
npm 6.4.1
dzija 1.16.0
reaģē-native 0.59.9
react-native-localize 1.1.3
i18n-js 3.3.0

Darba sākšana

Mēs izveidosim aplikāciju, kas atbalstīs angļu, franču un arābu valodu. Vispirms mēs izveidojam jaunu projektu, izmantojot react-native-cli. Lai to izdarītu, terminālī ir jāievada:

$ react-native init multiLanguage
$ cd daudzvalodu

Nepieciešamo bibliotēku pievienošana

Pirmais solis ir instalēt react-native-localize, ierakstot šo:
$ dzija pievienot react-native-localize

Ja instalēšanas procesā rodas problēmas, Ir vērts izlasīt uzstādīšanas rokasgrāmatu.

React-native-localize bibliotēka sniedz izstrādātājam piekļuvi daudzvalodu līdzekļiem. Bet viņai vajag vēl vienu bibliotēku - i18n.

Šajā rakstā ir aprakstīta izmantošana I18n.js lai nodrošinātu tulkojumu JavaScript.

$ dzija pievienot i18n-js

Tā kā i18n-js nenodrošina kešatmiņu vai iegaumēšanu, iesaku šim nolūkam izmantot lodash.memoize:

$ dzijas pievienot lodash.memoize

Darbs ar tulkojumiem

Lai lietojumprogramma varētu strādāt ar citām valodām, vispirms src iekšpusē ir jāizveido tulkojumu direktorijs, pēc tam trīs JSON faili katrai valodai.

1. en.json angļu valodai;

2. fr.json franču valodai;

3. ar.json arābu valodai.

Šajos failos ir JSON objekti ar atslēgām un vērtībām. Katrai valodai atslēga būs vienāda. Lietojumprogramma to izmanto, lai parādītu teksta informāciju.

Vērtība ir teksts, kas jāparāda lietotājam.

Angļu:

{"hello": "Sveika pasaule!"}

Французский

{"sveiki": "Sveicu le Monde!"}

Арабский

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

Tādā pašā veidā varat pievienot citas valodas.

Galvenais kods

Šajā brīdī jums ir jāatver fails App.js un jāpievieno tam importētie vienumi:

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

Pēc tam tiek pievienotas palīgfunkcijas un konstantes, kas noderēs vēlāk.

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

Tagad izveidosim lietotņu klases komponentu:

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

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

Pēc tam elementam componentDidMount() jāpievieno notikumu uztvērējs, šis elements uzklausīs atjauninājumus un izsauks handleLocalizationChange(), kad tie notiks.

HandLocalizationChange() metode aktivizē setI18nConfig() un forceUpdate(). Tas ir nepieciešams Android ierīcēm, jo komponents ir jāatveido, lai izmaiņas būtu pamanāmas.

Tad jums ir jānoņem klausīšanās no komponentaWillUnmount() metodes.

Visbeidzot, render() atgriež hello, izmantojot translate() un pievienojot tam galveno parametru. Pēc šīm darbībām lietojumprogramma varēs “saprast”, kāda valoda ir nepieciešama, un parādīt tajā ziņojumus.

Lietojumprogrammas palaišana

Tagad ir pienācis laiks pārbaudīt, kā tulkošana darbojas.

Pirmkārt, mēs palaižam lietojumprogrammu simulatorā vai emulatorā, ierakstot

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

Tas izskatīsies apmēram šādi:

Tagad varat mēģināt mainīt valodu uz franču valodu, palaižot lietojumprogrammu.

Mēs darām to pašu ar arābu valodu, nav nekādas atšķirības.

Tik tālu, labi.

Bet kas notiek, ja atlasāt nejauši izvēlētu valodu, kurai lietojumprogrammā nav tulkojuma?

Izrādās, findBestLanguage uzdevums ir nodrošināt optimālo tulkojumu no visiem pieejamajiem. Rezultātā tiks parādīta noklusējuma valoda.

Mēs runājam par tālruņa iestatījumiem. Piemēram, iOS emulatorā var redzēt valodu secību.

Ja atlasītā valoda nav vēlamā valoda, FindBestAvailableLanguage atgriež nedefinētu, lai tiktu parādīta noklusējuma valoda.

prēmija

React-native-localize ir API, kas nodrošina piekļuvi lielam skaitam valodas elementu. Pirms sākat darbu, Ir vērts iepazīties ar dokumentāciju.

Atzinumi

Lietojumprogrammu bez problēmām var padarīt daudzvalodu. React-native-localize ir lieliska iespēja, kas ļauj paplašināt lietotnes lietotāju bāzi.

Projekta pirmkods ir š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".

Praktiskā gada kurss "PHP izstrādātājs no 0 līdz PRO".

Avots: www.habr.com

Daudzvalodu lietojumprogrammas rakstīšana programmā React Native