🥇Piszemy wielojęzyczną aplikację w React Native

Lokalizacja produktów jest bardzo ważna dla międzynarodowych firm eksplorujących nowe kraje i regiony. Podobnie lokalizacja jest potrzebna w przypadku aplikacji mobilnych. Jeśli deweloper rozpoczyna ekspansję zagraniczną, ważne jest, aby dać użytkownikom z innego kraju możliwość pracy z interfejsem w ich ojczystym języku. W tym artykule utworzymy aplikację React Native przy użyciu pakietu reaguj-natywnie-lokalizuj.

Skillbox poleca: Kurs edukacyjny on-line „Zawód programista Java”.
Przypomnienie: dla wszystkich czytelników „Habr” - rabat w wysokości 10 000 rubli przy zapisywaniu się na dowolny kurs Skillbox przy użyciu kodu promocyjnego „Habr”.

Narzędzia i umiejętności

Aby zrozumieć ten artykuł, potrzebujesz podstawowych umiejętności pracy z React Native. Możesz zapoznać się z ustawieniami działającej maszyny skorzystaj z oficjalnych instrukcji.

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

Węzeł v10.15.0
npm 6.4.1
przędza 1.16.0
reagują natywnie 0.59.9
reaguj-native-localize 1.1.3
i18n-js 3.3.0

Pierwsze kroki

Stworzymy aplikację, która będzie obsługiwać język angielski, francuski i arabski. Najpierw tworzymy nowy projekt za pomocą React-native-cli. Aby to zrobić, musisz wpisać w terminalu:

$ reagujący natywny init multiLanguage
$ cd wielojęzyczny

Dodanie niezbędnych bibliotek

Pierwszym krokiem jest zainstalowanie React-Native-Localize poprzez wpisanie następującego polecenia:
$ przędza dodaj reakcję-natywną lokalizację

Jeśli podczas procesu instalacji wystąpią problemy, Warto przeczytać instrukcję montażu.

Biblioteka React-Native-Localize zapewnia programiście dostęp do funkcji wielojęzycznych. Ale potrzebuje jeszcze jednej biblioteki - i18n.

W tym artykule opisano zastosowanie I18n.js w celu zapewnienia tłumaczenia na JavaScript.

$ przędza dodaje i18n-js

Cóż, ponieważ i18n-js nie zapewnia buforowania ani zapamiętywania, sugeruję użycie w tym celu pliku lodash.memoize:

$ przędza dodaj lodash.memoize

Praca z tłumaczeniami

Aby aplikacja mogła współpracować z innymi językami, należy najpierw utworzyć w src katalog tłumaczeń, a następnie po trzy pliki JSON dla każdego języka.

1. en.json dla języka angielskiego;

2. fr.json dla języka francuskiego;

3. ar.json dla języka arabskiego.

Pliki te zawierają obiekty JSON z kluczami i wartościami. Klucz będzie taki sam dla każdego języka. Wykorzystywany jest przez aplikację do wyświetlania informacji tekstowych.

Wartość to tekst, który musi zostać wyświetlony użytkownikowi.

Język angielski:

{"cześć": "Witaj świecie!"}

francuski

{"cześć": "Pozdrowienia le Monde!"}

Арабский

{ "cześć": "أهلاً بالعالم"}

W ten sam sposób możesz dodać inne języki.

Kod główny

W tym momencie musisz otworzyć plik App.js i dodać do niego importy:

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

Następnie dodawane są funkcje pomocnicze i stałe, które przydadzą się później.

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

Cóż, teraz utwórzmy komponent klasy App:

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

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

Następnie musisz dodać detektor zdarzeń do ComponentDidMount(), ten element będzie nasłuchiwał aktualizacji i wywoływał handleLocalizationChange(), gdy one wystąpią.

Metoda handleLocalizationChange() aktywuje setI18nConfig() i forceUpdate(). Jest to konieczne w przypadku urządzeń z systemem Android, ponieważ komponent musi zostać wyrenderowany, aby zmiany były zauważalne.

Następnie musisz usunąć nasłuchiwanie z metody ComponentWillUnmount().

Na koniec funkcja render() zwraca funkcję hello, korzystając z funkcji Translator() i dodając do niej parametr key. Po wykonaniu tych kroków aplikacja będzie w stanie „zrozumieć” jaki język jest potrzebny i wyświetlić w nim komunikaty.

Uruchomienie aplikacji

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

Najpierw uruchamiamy aplikację w symulatorze lub emulatorze wpisując

$ Reaguj natywnie na run-ios
$ Reaguj natywnie na Androida

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

Teraz możesz spróbować zmienić język na francuski, uruchamiając aplikację.

To samo robimy z językiem arabskim, nie ma różnicy.

Jak na razie dobrze.

Ale co się stanie, jeśli wybierzesz losowy język, na który w aplikacji nie ma tłumaczenia?

Okazuje się, że zadaniem findBestLanguage jest zapewnienie optymalnego tłumaczenia ze wszystkich dostępnych. W rezultacie wyświetlony zostanie język domyślny.

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

Jeśli wybrany język nie jest językiem preferowanym, findBestAvailableLanguage zwraca wartość niezdefiniowaną, co powoduje wyświetlenie języka domyślnego.

Bonus

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

odkrycia

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

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

Skillbox poleca:

Dwuletni kurs praktyczny „Jestem programistą internetowym PRO”.

Kurs online „Programista C# od podstaw”.

Praktyczny roczny kurs "Programista PHP od 0 do PRO".

Źródło: www.habr.com

Napisanie wielojęzycznej aplikacji w React Native