Vi skriver en flerspråkig applikation med React Native

Lokalisering av produkter är mycket viktigt för internationella företag som behöver etablera sig i nya länder och regioner. På samma sätt är lokalisering nödvändig för mobilapplikationer. Om utvecklaren påbörjar en internationell expansion är det viktigt att ge användare från ett annat land möjligheten att använda gränssnittet på sitt modersmål. I denna artikel kommer vi att skapa en React Native-app med hjälp av paketet react-native-localize.

Skillbox rekommenderar: Utbildningskurs online "Yrket Java-utvecklare".
Påminnelse: för alla läsare av "Habr" — 10 000 rubel rabatt vid registrering för vilken kurs som helst på Skillbox med rabattkoden "Habr".

Verktyg och färdigheter

För att förstå denna artikel behövs grundläggande kunskaper om React Native. För att bekanta dig med inställningarna för din arbetsmaskin kan du använda den officiella instruktionen.

Vi kommer att behöva följande versioner av programverktyg:

• 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

Vi börjar

Vi kommer att skapa en app som stödjer engelska, franska och arabiska. Först skapar vi ett nytt projekt med hjälp av react-native-cli. I terminalen skriver vi följande:

$ react-native init multiLanguage
$ cd multiLanguage

Lägg till nödvändiga bibliotek

Först behöver vi installera react-native-localize genom att skriva följande:
$ yarn add react-native-localize

Om det uppstår problem under installationen, är det bra att studera installationsmanualen.

Biblioteket react-native-localize ger utvecklaren tillgång till flerspråkiga funktioner. Men det behöver ytterligare ett bibliotek — i18n.

I artikeln beskrivs användningen I18n.js för att säkerställa översättning i JavaScript.

$ yarn add i18n-js

Eftersom i18n-js inte erbjuder caching eller memoization, föreslår jag att vi använder lodash.memoize för detta:

$ yarn add lodash.memoize

Arbeta med översättningar

För att appen ska kunna hantera andra språk, måste du först skapa en mapp som heter translations inuti src, och sedan tre JSON-filer för varje språk.

1. en.json för engelska;

2. fr.json för franska;

3. ar.json för arabiska.

Dessa filer innehåller JSON-objekt med nycklar och värden. Nyckeln kommer att vara densamma för varje språk. Den används av appen för att visa textinformation.

Värdet (value) är den text som ska visas för användaren.

Engelska:

{ "hello": "Hello World!"}

Franska

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

Arabiska

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

På samma sätt kan du lägga till andra språk.

Huvudkod

Vid detta stadium behöver vi öppna filen App.js och lägga till importen:

import React from "react";
import * as RNLocalize from "react-native-localize";
import i18n from "i18n-js";
import memoize from "lodash.memoize"; // Används för caching/memoization för bättre prestanda
 
import {
  I18nManager,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View
} from "react-native";

Därefter läggs hjälpfunktioner och konstanter till som kommer att vara användbara senare.

const translationGetters = {
  // lazy requires (metro bundler stödjer inte 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 om ingen tillgänglig språk passa
  const fallback = { languageTag: "en", isRTL: false };
 
  const { languageTag, isRTL } =
    RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
    fallback;
 
  // rensa översättningscache
  translate.cache.clear();
  // uppdatera layoutens riktning
  I18nManager.forceRTL(isRTL);
  // ställ in i18n-js konfiguration
  i18n.translations = { [languageTag]: translationGetters[languageTag]() };
  i18n.locale = languageTag;
};

Nu ska vi skapa klasskomponenten App:

export default class App extends React.Component {
  constructor(props) {
    super(props);
    setI18nConfig(); // ställ in 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
  }
});

Första elementen — setI18nConfig() — sätter den initiala konfigurationen.

Sedan i componentDidMount() behövs en lyssnare för händelser, detta element kommer att övervaka uppdateringar och anropa handleLocalizationChange() när de inträffar.

Metoden handleLocalizationChange() aktiverar setI18nConfig() och forceUpdate(). Detta är nödvändigt för Android-enheter, eftersom komponenten måste renderas för att ändringarna ska bli märkbara.

Därefter måste lyssnaren tas bort i metoden componentWillUnmount().

Slutligen returnerar render() hello genom att använda translate() och lägga till parameter key. Efter dessa åtgärder kommer applikationen att kunna "förstå" vilket språk som behövs och visa meddelanden på det.

Köra applikationen

Nu är det dags att kontrollera hur översättningen fungerar.

Först startar vi applikationen i simulatorn eller emulators genom att skriva

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

Det kommer att se ut ungefär så här:

Nu kan du prova att byta språk till franska genom att starta appen igen.

Med arabiska gör vi samma sak, det finns ingen skillnad.

Så här långt går allt bra.

Men vad händer om du väljer ett slumpmässigt språk som inte finns i appen?

Det visar sig att uppgiften findBestLanguage är att erbjuda den bästa översättningen av alla som är tillgängliga. Resultatet blir att det språk som har ställts in som standard visas.

Det handlar om telefonens inställningar. Till exempel i iOS-emulatorn kan du se språkordningen.

Om det valda språket inte är det föredragna, returnerar findBestAvailableLanguage undefined, så det språk som är inställt som standard kommer att visas.

Bonus

react-native-localize har ett API som ger tillgång till många språkkomponenter. Innan du börjar arbeta, kan det vara bra att bekanta sig med dokumentationen..

Slutsatser

Appen kan göras flerspråkig utan större problem. React-native-localize är ett utmärkt alternativ som gör det möjligt att nå en bredare publik.

Projektets källkod finns här..

Skillbox rekommenderar:

• Tvåårig praktisk kurs «Jag är webbutvecklare PRO».
• Onlinekurs «C#-utvecklare från grunden».
• Praktisk årskurs PHP-utvecklare från grunden till PRO.

Källa: habr.com