🥇Vi skriver en flersproget ansøgning på React Native

Lokaliseringen af produkter er meget vigtig for internationale virksomheder, der udvikler nye lande og regioner. Tilsvarende er lokalisering nødvendig for mobile applikationer. Hvis en udvikler starter international ekspansion, er det vigtigt at give brugere fra et andet land mulighed for at arbejde med grænsefladen på deres modersmål. I denne artikel vil vi oprette en React Native-app ved hjælp af pakken reagere-indfødt-lokalisere.

Skillbox anbefaler: Pædagogisk online kursus "Profession Java Developer".
Påmindelse: for alle læsere af "Habr" - en rabat på 10 rubler ved tilmelding til ethvert Skillbox-kursus ved hjælp af "Habr"-kampagnekoden.

Værktøjer og færdigheder

At forstå denne artikel kræver grundlæggende React Native-færdigheder. For at blive bekendt med indstillingerne af arbejdsmaskinen kan du bruge officielle instruktioner.

Vi har brug for disse versioner af softwareværktøjer:

Node v10.15.0
npm 6.4.1
garn 1.16.0
reager-native 0.59.9
react-native-localize 1.1.3
i18n-js 3.3.0

Kom i gang

Vi vil oprette 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 i terminalen skrive dette:

$ react-native init multiLanguage
$ cd flersproget

Tilføjelse af de nødvendige biblioteker

Det første trin er at installere react-native-localize ved at skrive følgende:
$ garn tilføje react-native-localize

Hvis du støder på problemer under installationsprocessen, tjek installationsvejledningen.

React-native-localize-biblioteket giver udvikleren adgang til flersprogede funktioner. Men hun har brug for et andet bibliotek - i18n.

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

$ garn tilføje i18n-js

Nå, da i18n-js ikke giver caching eller memoisering, foreslår jeg at bruge lodash.memoize til dette:

$ garn tilføje lodash.memoize

Arbejde med oversættelser

For at applikationen kan fungere med andre sprog, skal du først oprette en oversættelsesmappe inde i src, derefter tre JSON-filer for hvert af sprogene.

1. en.json for engelsk;

2. fr.json for 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. Det bruges af applikationen til at vise tekstinformation.

Værdi (værdi) er den tekst, der skal vises til brugeren.

Engelsk:

{ "hello": "Hej verden!"}

Французский

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

Арабский

{ "hello": "Tilbud"}

Andre sprog kan tilføjes på samme måde.

Hovedkode

På dette tidspunkt skal du åbne App.js-filen og tilføje importer til 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";

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

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å, lad os nu oprette en komponent af App-klassen:

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ørste element, setI18nConfig(), sætter den indledende konfiguration.

Så skal vi tilføje en hændelseslytter til componentDidMount() , dette element vil lytte efter opdateringer og kalde handleLocalizationChange() når de opstår.

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

Så skal vi fjerne lytteren fra componentWillUnmount()-metoden.

Til sidst returneres hello i render() ved at bruge translate() og tilføje en nøgleparameter til den. Efter disse trin vil applikationen være i stand til at "forstå", hvilket sprog der er brug for og vise beskeder i det.

Applikationsstart

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

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

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

Det kommer til at se sådan ud:

Nu kan du prøve at ændre sproget til fransk ved at starte applikationen.

Vi gør det samme med det arabiske sprog, der er ingen forskel.

Indtil videre går alt godt.

Men hvad sker der, hvis du vælger et tilfældigt sprog, der ikke har en oversættelse i appen?

Det viser sig, at opgaven med findBestLanguage er at levere den bedst mulige oversættelse blandt alle tilgængelige. Som et resultat vil det sprog, der blev indstillet som standard, blive vist.

Det handler om telefonindstillinger. Så for eksempel i iOS-emulatoren kan du se rækkefølgen af sprog.

Hvis det valgte sprog ikke er det foretrukne sprog, returnerer findBestAvailableLanguage udefineret, så standardsproget vises.

Bonus

react-native-localize har en API, der giver adgang til et stort antal sprogelementer. Inden arbejdet påbegyndes, det er værd at læse dokumentationen.

Fund

Ansøgningen kan gøres flersproget uden problemer. React-native-localize er en fantastisk mulighed, der giver dig mulighed for at udvide rækken af brugere af din applikation.

Projektets kildekode placeret her.

Skillbox anbefaler:

To-årigt praktisk kursus "Jeg er en PRO webudvikler".

Online kursus "C# udvikler fra bunden".

Praktisk årskursus "PHP-udvikler fra 0 til PRO".

Kilde: www.habr.com

Vi skriver en flersproget ansøgning på React Native