Tworzymy aplikację wielojęzyczną w React Native

Lokalizacja produktów jest bardzo ważna dla międzynarodowych firm wchodzących na nowe rynki i regiony. Podobnie lokalizacja jest potrzebna aplikacjom mobilnym. Gdy deweloper rozpoczyna międzynarodową ekspansję, ważne jest, aby użytkownicy z innego kraju mogli korzystać z interfejsu w swoim ojczystym języku. W tym artykule stworzymy aplikację React Native, korzystając z pakietu react-native-localize.

Skillbox poleca: Edukacyjny kurs online «Zawód programista Java».
Przypominamy: dla wszystkich czytelników „Habra” — zniżka 10 000 rubli przy zapisie na dowolny kurs Skillbox z kodem promocyjnym „Habra”.

Narzędzia i umiejętności

Aby zrozumieć ten artykuł, potrzebne są podstawowe umiejętności pracy z React Native. Aby zapoznać się z ustawieniami roboczej maszyny, można skorzystać z oficjalnej instrukcji.

Będziemy potrzebować następujących wersji narzędzi programistycznych:

• 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

Rozpoczynamy

Stworzymy aplikację, która będzie obsługiwać języki angielski, francuski i arabski. Najpierw tworzymy nowy projekt, używając react-native-cli. W tym celu należy w terminalu wpisać:

$ react-native init multiLanguage
$ cd multiLanguage

Dodajemy potrzebne biblioteki

Najpierw musimy zainstalować react-native-localize, wpisując:
$ yarn add react-native-localize

Jeśli podczas instalacji wystąpią problemy, warto zapoznać się z instrukcją instalacji.

Biblioteka react-native-localize daje deweloperowi dostęp do funkcji wielojęzycznych. Potrzebna jest jej jeszcze jedna biblioteka — i18n.

W artykule opisano użycie I18n.js aby zapewnić tłumaczenie w JavaScript.

$ yarn add i18n-js

A ponieważ i18n-js nie zapewnia buforowania ani memoizacji, proponuję użyć do tego lodash.memoize:

$ yarn add lodash.memoize

Praca z tłumaczeniami

Aby aplikacja mogła obsługiwać także inne języki, najpierw musimy utworzyć katalog translations w folderze src, a następnie trzy pliki JSON, dla każdego z języków.

1. en.json dla języka angielskiego;

2. fr.json dla języka francuskiego;

3. ar.json dla języka arabskiego.

Te pliki zawierają obiekty JSON z kluczami i wartościami. Klucz będzie taki sam dla każdego języka. Jest używany przez aplikację do wyświetlania informacji tekstowych.

Wartość (value) — to tekst, który należy pokazać użytkownikowi.

Język angielski:

{ "hello": "Hello World!"}

Francuski

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

Arabski

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

W ten sam sposób można dodawać inne języki.

Kod główny

Na tym etapie należy otworzyć plik App.js i dodać do niego import:

import React from "react";
import * as RNLocalize from "react-native-localize";
import i18n from "i18n-js";
import memoize from "lodash.memoize"; // Użyj do cachowania / memoize dla lepszej wydajności

import {
  I18nManager,
  SafeAreaView,
  ScrollView,
  StyleSheet,
  Text,
  View
} from "react-native";

Następnie dodajemy funkcje pomocnicze i stałe, które będą przydatne później.

const translationGetters = {
  // leniwe wymagania (metro bundler nie obsługuje symlinków)
  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 jeśli brak dostępnego języka
  const fallback = { languageTag: "en", isRTL: false };

  const { languageTag, isRTL } =
    RNLocalize.findBestAvailableLanguage(Object.keys(translationGetters)) ||
    fallback;

  // wyczyść pamięć podręczną tłumaczeń
  translate.cache.clear();
  // aktualizuj kierunek układu
  I18nManager.forceRTL(isRTL);
  // ustaw konfigurację i18n-js
  i18n.translations = { [languageTag]: translationGetters[languageTag]() };
  i18n.locale = languageTag;
};

A teraz stwórzmy komponent klasy App:

export default class App extends React.Component {
  constructor(props) {
    super(props);
    setI18nConfig(); // ustaw początkową konfigurację
  }

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

Pierwszy element — setI18nConfig() — ustawia początkową konfigurację.

Następnie w componentDidMount() trzeba dodać nasłuchiwanie wydarzeń. Ten element będzie śledził aktualizacje i wywoła handleLocalizationChange(), gdy one wystąpią.

Metoda handleLocalizationChange() aktywuje setI18nConfig() i forceUpdate(). Jest to konieczne dla urządzeń z Androidem, ponieważ komponent musi zostać wyrenderowany, aby zmiany były widoczne.

Następnie trzeba usunąć nasłuchiwanie z metody componentWillUnmount().

Na koniec, w render() zwracane jest hello poprzez użycie translate() i dodanie do niego parametru key. Po tych działaniach aplikacja będzie mogła „rozumieć”, jaki język jest potrzebny i wyświetlać wiadomości właśnie w nim.

Uruchomienie aplikacji

Teraz nadszedł czas, aby sprawdzić, jak działa tłumaczenie.

Najpierw uruchamiamy aplikację w symulatorze lub emulatorze, wpisując

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

Będzie to wyglądać mniej więcej tak:

Teraz można spróbować zmienić język na francuski, a następnie uruchomić aplikację.

Z językiem arabskim robimy to samo, nie ma różnicy.

Na razie wszystko idzie dobrze.

Ale co się stanie, jeśli wybierzemy losowy język, którego tłumaczenie nie istnieje w aplikacji?

Okazuje się, że zadanie findBestLanguage polega na dostarczeniu optymalnego tłumaczenia spośród dostępnych. W wyniku wyświetlany jest język, który został ustawiony jako domyślny.

Mowa o ustawieniach telefonu. Na przykład w emulatorze iOS można zobaczyć kolejność języków.

Jeśli wybrany język nie jest preferowany, findBestAvailableLanguage zwraca undefined, więc wyświetlany jest język, który jest ustawiony jako domyślny.

Bonus

React-native-localize posiada API, które zapewnia dostęp do wielu elementów językowych. Zanim zaczniesz pracę, warto zapoznać się z dokumentacją..

Wnioski

Aplikację można uczynić wielojęzyczną bez większych problemów. React-native-localize to świetna opcja, która pozwala poszerzyć grono użytkowników aplikacji.

Kod źródłowy projektu znajduje się tutaj..

Skillbox poleca:

• Dwuletni praktyczny kurs «Jestem programistą webowym PRO».
• Kurs online „Programista C# od podstaw”.
• Praktyczny roczny kurs «PHP programista od 0 do PRO».

Źródło: habr.com