Skriver en flersproget applikation med React Native

Lokaliseringsprodukter er meget vigtige for internationale virksomheder, der udforsker nye lande og regioner. På samme måde er lokalisering også nødvendig for mobile applikationer. Hvis en udvikler begynder international ekspansion, er det vigtigt at give brugere fra et andet land muligheden for at arbejde med grænsefladen på deres modersmål. I denne artikel vil vi skabe en React Native-applikation ved hjælp af pakken react-native-localize.

Skillbox anbefaler: Online uddannelseskursus «Java-udvikler erhverv».
Vi minder om: til alle læsere af 'Habr' — rabat på 10.000 rubler ved tilmelding til et hvilket som helst Skillbox-kursus med rabatkoden 'Habr'.

Værktøjer og færdigheder

For at forstå denne artikel kræves grundlæggende færdigheder i at arbejde med React Native. For at få indsigt i opsætningen af arbejdsstationen kan man benytte den officielle vejledning.

Vi får brug for følgende versioner af softwareværktøjer:

• 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

Lad os begynde

Vi vil skabe en applikation, der understøtter engelsk, fransk og arabisk. Først opretter vi et nyt projekt ved hjælp af react-native-cli. For at gøre dette skal du skrive følgende i terminalen:

$ react-native init multiLanguage
$ cd multiLanguage

Tilføj de nødvendige biblioteker

Først skal vi installere react-native-localize ved at indtaste følgende:
$ yarn add react-native-localize

Hvis der opstår problemer under installationen, er det en god idé at gennemgå installationsmanualen.

Biblioteket react-native-localize giver udvikleren adgang til flersprogede funktioner. Men det kræver endnu et bibliotek — i18n.

Artiklen beskriver brugen af I18n.js for at sikre oversættelse i JavaScript.

$ yarn add i18n-js

Da i18n-js ikke tilbyder caching eller memoization, foreslår jeg at bruge lodash.memoize til dette:

$ yarn add lodash.memoize

Arbejdet med oversættelser

For at give applikationen mulighed for at arbejde med andre sprog, skal du først oprette en mappe kaldet translations i src, og derefter — tre JSON-filer, en for hvert sprog.

1. en.json til engelsk;

2. fr.json til fransk;

3. ar.json til arabisk.

Disse filer indeholder JSON-objekter med nøgler og værdier. Nøglen vil være den samme for hvert sprog. Den bruges af applikationen til at vise tekstinformation.

Værdien (value) er den tekst, der skal vises for brugeren.

Engelsk:

{ "hello": "Hello World!"}

Fransk

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

Arabisk

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

På samme måde kan andre sprog tilføjes.

Hovedkoden

På dette trin skal du åbne filen App.js og tilføje importen:

import React from "react";
import * as RNLocalize from "react-native-localize";
import i18n from "i18n-js";
import memoize from "lodash.memoize"; // Bruges til caching/memoize for bedre ydeevne
 
import {
  I18nManager,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View
} from "react-native";

Derefter tilføjes hjælpefunktioner og konstanter, som vil være nyttige senere.

const translationGetters = {
  // lazy requires (metro bundler understøtter ikke 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 hvis ingen tilgængeligt sprog passer
  const fallback = { languageTag: "en", isRTL: false };
 
  const { languageTag, isRTL } =
    RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
    fallback;
 
  // rydde oversættelsescachen
  translate.cache.clear();
  // opdatere layoutretning
  I18nManager.forceRTL(isRTL);
  // indstille i18n-js konfiguration
  i18n.translations = { [languageTag]: translationGetters[languageTag]() };
  i18n.locale = languageTag;
};

Nu skaber vi klassekomponenten App:

export default class App extends React.Component {
  constructor(props) {
    super(props);
    setI18nConfig(); // indstil initial konfiguration
  }
 
  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
  }
});

Det første element er setI18nConfig() — som sætter den indledende konfiguration.

Derefter i componentDidMount() skal du tilføje en lytter til begivenheder, dette element vil følge opdateringer og kalde handleLocalizationChange(), når de opstår.

Metoden handleLocalizationChange() aktiverer setI18nConfig() og forceUpdate(). Dette er nødvendigt for Android-enheder, da komponenten skal renderes for at ændringerne bliver synlige.

Derefter skal du fjerne lytteren i metoden componentWillUnmount().

Til sidst returneres hello i render() ved at bruge translate() og tilføje nøglen som parameter. Efter disse handlinger kan applikationen "forstå", hvilket sprog der er nødvendigt, og vise beskeder på det.

Kørsel af applikationen

Nu er det tid til at tjekke, hvordan oversættelsen fungerer.

Først skal vi køre applikationen i simulatoren eller emulatoren ved at skrive

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

Det vil se nogenlunde sådan ud:

Nu kan du prøve at skifte sproget til fransk ved derefter at starte applikationen.

Med arabisk gør vi det samme, der er ingen forskel.

Indtil videre går alt godt.

Men hvad sker der, hvis du vælger et vilkårligt sprog, som ikke findes i applikationen?

Det viser sig, at opgaven findBestLanguage er at give den optimale oversættelse af alle tilgængelige. Resultatet vil være det sprog, der er indstillet som standard.

Det handler om telefonindstillinger. For eksempel kan man i iOS-emulatoren se rækkefølgen af sprog.

Hvis det valgte sprog ikke er det foretrukne, returnerer findBestAvailableLanguage undefined, så det sprog, der vises, er det, der er indstillet som standard.

Bonus

React-native-localize har et API, som giver adgang til et stort antal sproglige elementer. Før du begynder at arbejde, bør du sætte dig ind i dokumentationen..

Konklusioner

Applikationen kan gøres flersproget uden særlig store problemer. React-native-localize er et fremragende valg, der giver mulighed for at udvide brugerbasen for applikationen.

Kildekoden til projektet findes her..

Skillbox anbefaler:

• Toårigt praktisk kursus «Jeg er webudvikler PRO».
• Online kursus «C#-udvikler fra bunden».
• Praktisk års kursus "PHP-udvikler fra 0 til PRO".

Kilde: habr.com