🥇Vi skriver en flerspråkig ansökan i React Native

Produktlokalisering är mycket viktig för internationella företag som utforskar nya länder och regioner. På samma sätt behövs lokalisering för mobila applikationer. Om en utvecklare börjar expandera internationellt är det viktigt att ge användare från ett annat land möjlighet att arbeta med gränssnittet på sitt modersmål. I den här artikeln kommer vi att skapa en React Native-applikation med paketet reagera-infödd-lokalisera.

Skillbox rekommenderar: Pedagogisk onlinekurs "Yrke Java-utvecklare".
Påminnelse: för alla läsare av "Habr" - en rabatt på 10 000 rubel när du anmäler dig till någon Skillbox-kurs med hjälp av "Habr"-kampanjkoden.

Verktyg och färdigheter

För att förstå den här artikeln behöver du grundläggande färdigheter i att arbeta med React Native. För att bekanta dig med arbetsmaskinens inställningar kan du använd de officiella instruktionerna.

Vi kommer att behöva dessa versioner av mjukvaruverktyg:

Nod v10.15.0
npm 6.4.1
garn 1.16.0
reagerande naturligt 0.59.9
react-native-localize 1.1.3
i18n-js 3.3.0

Komma igång

Vi kommer att skapa en applikation som stöder engelska, franska och arabiska. Först skapar vi ett nytt projekt med hjälp av react-native-cli. För att göra detta måste du skriva detta i terminalen:

$ react-native init multiLanguage
$ cd multiLanguage

Lägger till nödvändiga bibliotek

Det första steget är att installera react-native-localize genom att skriva följande:
$ garn add react-native-localize

Om problem uppstår under installationsprocessen, Det är värt att läsa installationsmanualen.

React-native-localize-biblioteket ger utvecklaren tillgång till flerspråkiga funktioner. Men hon behöver ett bibliotek till - i18n.

Den här artikeln beskriver användningen I18n.js för att tillhandahålla översättning till JavaScript.

$ yarn add i18n-js

Tja, eftersom i18n-js inte tillhandahåller cachning eller memoisering, föreslår jag att du använder lodash.memoize för detta:

$ garn lägg till lodash.memoize

Arbetar med översättningar

För att applikationen ska kunna fungera med andra språk måste du först skapa en översättningskatalog inuti src, 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 applikationen för att visa textinformation.

Värde är texten som måste visas för användaren.

Engelska språket:

{"hello": "Hej världen!"}

Французский

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

Арабский

{ "hej": "Sammanfattning"}

Du kan lägga till andra språk på samma sätt.

Huvudkod

Vid det här laget måste du öppna filen App.js och lägga till importer till den:

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

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

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

Nåväl, låt oss nu skapa en komponent i appklassen:

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

Det första elementet, setI18nConfig(), ställer in den initiala konfigurationen.

Sedan måste du lägga till en händelseavlyssnare till componentDidMount(), det här elementet lyssnar efter uppdateringar och anropar 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 märkas.

Sedan måste du ta bort lyssningen från componentWillUnmount()-metoden.

Slutligen returnerar render() hej genom att använda translate() och lägga till en nyckelparameter till den. Efter dessa steg kommer applikationen att kunna "förstå" vilket språk som behövs och visa meddelanden i det.

Programlansering

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

Först startar vi applikationen i simulatorn eller emulatorn 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 ändra språket till franska genom att starta programmet.

Vi gör samma sak med arabiska, det är ingen skillnad.

Än så länge är allt bra.

Men vad händer om du väljer ett slumpmässigt språk som det inte finns någon översättning för i applikationen?

Det visar sig att findBestLanguage uppgift är att tillhandahålla den optimala översättningen från alla tillgängliga. Som ett resultat kommer standardspråket att visas.

Vi pratar om telefoninställningar. I iOS-emulatorn kan du till exempel se ordningen på språken.

Om det valda språket inte är det föredragna språket returnerar findBestAvailableLanguage odefinierat så att standardspråket visas.

bonus

react-native-localize har ett API som ger tillgång till ett stort antal språkelement. Innan du börjar arbeta, Det är värt att kolla in dokumentationen.

Resultat

Applikationen kan göras flerspråkig utan problem. React-native-localize är ett utmärkt alternativ som låter dig utöka din apps användarbas.

Projektets källkod är här.

Skillbox rekommenderar:

Tvåårig praktisk kurs "Jag är en PRO webbutvecklare".

Onlinekurs "C#-utvecklare från grunden".

Praktisk årskurs "PHP-utvecklare från 0 till PRO".

Källa: will.com

Att skriva en flerspråkig ansökan i React Native