ПишСм ΠΌΡƒΠ»ΡŒΡ‚ΠΈΡΠ·Ρ‹Ρ‡Π½ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° React Native

ПишСм ΠΌΡƒΠ»ΡŒΡ‚ΠΈΡΠ·Ρ‹Ρ‡Π½ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° React Native

Локализация ΠΏΡ€ΠΎΠ΄ΡƒΠΊΡ†ΠΈΠΈ ΠΎΡ‡Π΅Π½ΡŒ Π²Π°ΠΆΠ½Π° для ΠΌΠ΅ΠΆΠ΄ΡƒΠ½Π°Ρ€ΠΎΠ΄Π½Ρ‹Ρ… ΠΊΠΎΠΌΠΏΠ°Π½ΠΈΠΉ, ΠΎΡΠ²Π°ΠΈΠ²Π°ΡŽΡ‰ΠΈΡ… Π½ΠΎΠ²Ρ‹Π΅ для сСбя страны ΠΈ Ρ€Π΅Π³ΠΈΠΎΠ½Ρ‹. Аналогично локализация Π½ΡƒΠΆΠ½Π° ΠΈ ΠΌΠΎΠ±ΠΈΠ»ΡŒΠ½Ρ‹ΠΌ прилоТСниям. Если Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚ ΠΌΠ΅ΠΆΠ΄ΡƒΠ½Π°Ρ€ΠΎΠ΄Π½ΡƒΡŽ экспансию, Π²Π°ΠΆΠ½ΠΎ Π΄Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡΠΌ ΠΈΠ· Π΄Ρ€ΡƒΠ³ΠΎΠΉ страны Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ с интСрфСйсом Π½Π° Ρ€ΠΎΠ΄Π½ΠΎΠΌ языкС. Π’ этой ΡΡ‚Π°Ρ‚ΡŒΠ΅ ΠΌΡ‹ создадим ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ React Native, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ ΠΏΠ°ΠΊΠ΅Ρ‚ react-native-localize.

Skillbox Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅Ρ‚: ΠžΠ±Ρ€Π°Π·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ ΠΎΠ½Π»Π°ΠΉΠ½-курс Β«ΠŸΡ€ΠΎΡ„Π΅ΡΡΠΈΡ Java-Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΒ».
НапоминаСм: для всСх Ρ‡ΠΈΡ‚Π°Ρ‚Π΅Π»Π΅ΠΉ Β«Π₯Π°Π±Ρ€Π°Β» β€” скидка 10 000 Ρ€ΡƒΠ±Π»Π΅ΠΉ ΠΏΡ€ΠΈ записи Π½Π° любой курс Skillbox ΠΏΠΎ ΠΏΡ€ΠΎΠΌΠΎΠΊΠΎΠ΄Ρƒ Β«Π₯Π°Π±Ρ€Β».

Π˜Π½ΡΡ‚Ρ€ΡƒΠΌΠ΅Π½Ρ‚Ρ‹ ΠΈ Π½Π°Π²Ρ‹ΠΊΠΈ

Для понимания этой ΡΡ‚Π°Ρ‚ΡŒΠΈ Π½ΡƒΠΆΠ½Ρ‹ Π±Π°Π·ΠΎΠ²Ρ‹Π΅ Π½Π°Π²Ρ‹ΠΊΠΈ Ρ€Π°Π±ΠΎΡ‚Ρ‹ с React Native. Для ознакомлСния с настройками Ρ€Π°Π±ΠΎΡ‡Π΅ΠΉ ΠΌΠ°ΡˆΠΈΠ½Ρ‹ ΠΌΠΎΠΆΠ½ΠΎ Π²ΠΎΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ ΠΎΡ„ΠΈΡ†ΠΈΠ°Π»ΡŒΠ½ΠΎΠΉ инструкциСй.

Нам понадобятся Π²ΠΎΡ‚ Ρ‚Π°ΠΊΠΈΠ΅ вСрсии ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠ½Ρ‹Ρ… инструмСнтов:

  • 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

НачинаСм

ΠœΡ‹ создадим ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ английский, французский ΠΈ арабский языки. Π‘Π½Π°Ρ‡Π°Π»Π° создаСм Π½ΠΎΠ²Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ react-native-cli. Для этого Π² Ρ‚Π΅Ρ€ΠΌΠΈΠ½Π°Π»Π΅ Π½ΡƒΠΆΠ½ΠΎ Π½Π°Π±Ρ€Π°Ρ‚ΡŒ Π²ΠΎΡ‚ Ρ‡Ρ‚ΠΎ:

$ react-native init multiLanguage
$ cd multiLanguage

ДобавляСм Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Π΅ Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠΈ

ΠŸΠ΅Ρ€Π²Ρ‹ΠΌ Π΄Π΅Π»ΠΎΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡƒΡΡ‚Π°Π½ΠΎΠ²ΠΈΡ‚ΡŒ react-native-localize, Π½Π°Π±Ρ€Π°Π² ΡΠ»Π΅Π΄ΡƒΡŽΡ‰Π΅Π΅:
$ yarn add react-native-localize

Если Π² процСссС установки Π²ΠΎΠ·Π½ΠΈΠΊΠ°ΡŽΡ‚ ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌΡ‹, стоит ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΌΠ°Π½ΡƒΠ°Π» ΠΏΠΎ установкС.

Π‘ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° react-native-localize Π΄Π°Π΅Ρ‚ Ρ€Π°Π·Ρ€Π°Π±ΠΎΡ‚Ρ‡ΠΈΠΊΡƒ доступ ΠΊ ΠΌΡƒΠ»ΡŒΡ‚ΠΈΡΠ·Ρ‹Ρ‡Π½Ρ‹ΠΌ функциям. Но Π΅ΠΉ Π½ΡƒΠΆΠ½Π° Π΅Ρ‰Π΅ ΠΎΠ΄Π½Π° Π±ΠΈΠ±Π»ΠΈΠΎΡ‚Π΅ΠΊΠ° β€” i18n.

Π’ ΡΡ‚Π°Ρ‚ΡŒΠ΅ описываСтся использованиС I18n.js для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΎΠ±Π΅ΡΠΏΠ΅Ρ‡ΠΈΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ Π² JavaScript.

$ yarn add i18n-js

Ну Π° ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ i18n-js Π½Π΅ прСдоставляСт ΠΊΡΡˆΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡ ΠΈΠ»ΠΈ ΠΌΠ΅ΠΌΠΎΠΈΠ·Π°Ρ†ΠΈΠΈ, я ΠΏΡ€Π΅Π΄Π»Π°Π³Π°ΡŽ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ для этого lodash.memoize:

$ yarn add lodash.memoize

Π Π°Π±ΠΎΡ‚Π° с ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄Π°ΠΌΠΈ

Для Ρ‚ΠΎΠ³ΠΎ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΡƒΠΌΠ΅Π»ΠΎ Ρ€Π°Π±ΠΎΡ‚Π°Ρ‚ΡŒ ΠΈ с Π΄Ρ€ΡƒΠ³ΠΈΠΌΠΈ языками, сначала Π½ΡƒΠΆΠ½ΠΎ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΊΠ°Ρ‚Π°Π»ΠΎΠ³ translations Π²Π½ΡƒΡ‚Ρ€ΠΈ src, ΠΏΠΎΡ‚ΠΎΠΌ β€” Ρ‚Ρ€ΠΈ Ρ„Π°ΠΉΠ»Π° JSON, для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ ΠΈΠ· языков.

1. en.json для английского;

2. fr.json для французского;

3. ar.json для арабского.

Π­Ρ‚ΠΈ Ρ„Π°ΠΉΠ»Ρ‹ содСрТат ΠΎΠ±ΡŠΠ΅ΠΊΡ‚Ρ‹ JSON с ΠΊΠ»ΡŽΡ‡Π°ΠΌΠΈ ΠΈ значСниями. ΠšΠ»ΡŽΡ‡ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΠ΄ΠΈΠ½ ΠΈ Ρ‚ΠΎΡ‚ ΠΆΠ΅ для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ языка. Он ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ΠΌ для отобраТСния тСкстовой ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΠΈ.

Π—Π½Π°Ρ‡Π΅Π½ΠΈΠ΅ (value) β€” это тСкст, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π½ΡƒΠΆΠ½ΠΎ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΡŽ.

Английский язык:

{ Β«helloΒ»: Β«Hello World!Β»}

Ѐранцузский

{ Β«helloΒ»: Β«Salut le Monde!Β»}

Арабский

{ Β«helloΒ»: «Ψ£Ω‡Ω„Ψ§Ω‹ Ψ¨Ψ§Ω„ΨΉΨ§Ω„Ω…»}

Аналогичным ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ ΠΌΠΎΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²Π»ΡΡ‚ΡŒ ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ языки.

Основной код

На этом этапС Π½ΡƒΠΆΠ½ΠΎ ΠΎΡ‚ΠΊΡ€Ρ‹Ρ‚ΡŒ Ρ„Π°ΠΉΠ» App.js ΠΈ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ Π² Π½Π΅Π³ΠΎ ΠΈΠΌΠΏΠΎΡ€Ρ‚:

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

ПослС этого Π΄ΠΎΠ±Π°Π²Π»ΡΡŽΡ‚ΡΡ Π²ΡΠΏΠΎΠΌΠΎΠ³Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ ΠΈ константы, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ пригодятся впослСдствии.

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

Ну Π° Ρ‚Π΅ΠΏΠ΅Ρ€ΡŒ создадим ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ класса 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
  }
});

ΠŸΠ΅Ρ€Π²Ρ‹ΠΉ элСмСнт β€” setI18nConfig() β€” устанавливаСт Π½Π°Ρ‡Π°Π»ΡŒΠ½ΡƒΡŽ ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΡŽ.

Π—Π°Ρ‚Π΅ΠΌ Π² componentDidMount() Π½ΡƒΠΆΠ½ΠΎ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΡ€ΠΎΡΠ»ΡƒΡˆΠΈΠ²Π°Π½ΠΈΠ΅ событий, этот элСмСнт Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΡΠ»Π΅ΠΆΠΈΠ²Π°Ρ‚ΡŒ обновлСния ΠΈ Π²Ρ‹Π·Ρ‹Π²Π°Ρ‚ΡŒ handleLocalizationChange() Π² Ρ‚ΠΎΠΌ случаС, ΠΊΠΎΠ³Π΄Π° ΠΎΠ½ΠΈ происходят.

ΠœΠ΅Ρ‚ΠΎΠ΄ handleLocalizationChange() Π°ΠΊΡ‚ΠΈΠ²ΠΈΠ·ΠΈΡ€ΡƒΠ΅Ρ‚ setI18nConfig() ΠΈ forceUpdate(). Π­Ρ‚ΠΎ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎ для устройств Π½Π° Android, Ρ‚Π°ΠΊ ΠΊΠ°ΠΊ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½Ρ‚ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ ΠΎΡ‚Ρ€Π΅Π½Π΄Π΅Ρ€Π΅Π½, Ρ‡Ρ‚ΠΎΠ±Ρ‹ измСнСния стали Π·Π°ΠΌΠ΅Ρ‚Π½Ρ‹ΠΌΠΈ.

Π—Π°Ρ‚Π΅ΠΌ Π½ΡƒΠΆΠ½ΠΎ ΡƒΠ±Ρ€Π°Ρ‚ΡŒ ΠΏΡ€ΠΎΡΠ»ΡƒΡˆΠΈΠ²Π°Π½ΠΈΠ΅ ΠΈΠ· ΠΌΠ΅Ρ‚ΠΎΠ΄Π° componentWillUnmount().

НаконСц, Π² render() возвращаСтся hello ΠΏΡƒΡ‚Π΅ΠΌ использования translate() ΠΈ добавлСния Π² Π½Π΅Π³ΠΎ ΠΏΠ°Ρ€Π°ΠΌΠ΅Ρ‚Ρ€Π° key. ПослС этих дСйствий ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ смоТСт Β«ΠΏΠΎΠ½ΠΈΠΌΠ°Ρ‚ΡŒΒ», ΠΊΠ°ΠΊΠΎΠΉ язык Π½ΡƒΠΆΠ΅Π½, ΠΈ ΠΏΠΎΠΊΠ°Π·Ρ‹Π²Π°Ρ‚ΡŒ сообщСния ΠΈΠΌΠ΅Π½Π½ΠΎ Π½Π° Π½Π΅ΠΌ.

Запуск прилоТСния

Π’Π΅ΠΏΠ΅Ρ€ΡŒ самоС врСмя ΠΏΡ€ΠΎΠ²Π΅Ρ€ΠΈΡ‚ΡŒ, ΠΊΠ°ΠΊ Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄.

Π‘Π½Π°Ρ‡Π°Π»Π° запускаСм ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π² симуляторС ΠΈΠ»ΠΈ эмуляторС, набирая

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

Π’Ρ‹Π³Π»ΡΠ΄Π΅Ρ‚ΡŒ это Π±ΡƒΠ΄Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Ρ‚Π°ΠΊ:

ПишСм ΠΌΡƒΠ»ΡŒΡ‚ΠΈΡΠ·Ρ‹Ρ‡Π½ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° React Native

Π’Π΅ΠΏΠ΅Ρ€ΡŒ ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΠΏΡ€ΠΎΠ±ΠΎΠ²Π°Ρ‚ΡŒ ΡΠΌΠ΅Π½ΠΈΡ‚ΡŒ язык Π½Π° французский, запустив Π·Π°Ρ‚Π΅ΠΌ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅.

ПишСм ΠΌΡƒΠ»ΡŒΡ‚ΠΈΡΠ·Ρ‹Ρ‡Π½ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° React Native

Π‘ арабским языком ΠΏΡ€ΠΎΠ΄Π΅Π»Ρ‹Π²Π°Π΅ΠΌ Ρ‚ΠΎ ΠΆΠ΅ самоС, Ρ€Π°Π·Π½ΠΈΡ†Ρ‹ Π½Π΅Ρ‚.

Пока всС ΠΈΠ΄Π΅Ρ‚ Ρ…ΠΎΡ€ΠΎΡˆΠΎ.

Но Ρ‡Ρ‚ΠΎ ΠΏΡ€ΠΎΠΈΠ·ΠΎΠΉΠ΄Π΅Ρ‚, Ссли Π²Ρ‹Π±Ρ€Π°Ρ‚ΡŒ случайный язык, ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄Π° ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ³ΠΎ Π½Π΅Ρ‚ Π² ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠΈ?

ΠžΠΊΠ°Π·Ρ‹Π²Π°Π΅Ρ‚ΡΡ, Π·Π°Π΄Π°Ρ‡Π° findBestLanguage β€” прСдоставлСниС ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½ΠΎΠ³ΠΎ ΠΈΠ· всСх доступных ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄Π°. Π’ Ρ€Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚Π΅ Π±ΡƒΠ΄Π΅Ρ‚ ΠΎΡ‚ΠΎΠ±Ρ€Π°ΠΆΠ°Ρ‚ΡŒΡΡ язык, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Π±Ρ‹Π» установлСн ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.

Π Π΅Ρ‡ΡŒ ΠΈΠ΄Π΅Ρ‚ ΠΎ настройках Ρ‚Π΅Π»Π΅Ρ„ΠΎΠ½Π°. Π’Π°ΠΊ, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, Π² эмуляторС iOS ΠΌΠΎΠΆΠ½ΠΎ ΠΏΠΎΡΠΌΠΎΡ‚Ρ€Π΅Ρ‚ΡŒ порядок языков.

ПишСм ΠΌΡƒΠ»ΡŒΡ‚ΠΈΡΠ·Ρ‹Ρ‡Π½ΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° React Native

Если Π²Ρ‹Π±Ρ€Π°Π½Π½Ρ‹ΠΉ язык Π½Π΅ являСтся ΠΏΡ€Π΅Π΄ΠΏΠΎΡ‡ΠΈΡ‚Π°Π΅ΠΌΡ‹ΠΌ, findBestAvailableLanguage Π²ΠΎΠ·Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ undefined, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ показываСтся Ρ‚ΠΎΡ‚ язык, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ установлСн ΠΏΠΎ ΡƒΠΌΠΎΠ»Ρ‡Π°Π½ΠΈΡŽ.

Бонус

Π£ react-native-localize Π΅ΡΡ‚ΡŒ API, ΠΊΠΎΡ‚ΠΎΡ€ΠΎΠ΅ прСдоставляСт доступ ΠΊ Π±ΠΎΠ»ΡŒΡˆΠΎΠΌΡƒ количСству языковых элСмСнтов. ΠŸΠ΅Ρ€Π΅Π΄ Ρ‚Π΅ΠΌ, ΠΊΠ°ΠΊ Π½Π°Ρ‡Π°Ρ‚ΡŒ Ρ€Π°Π±ΠΎΡ‚Ρƒ, стоит ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ΡŒΡΡ с Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΠ΅ΠΉ.

Π’Ρ‹Π²ΠΎΠ΄Ρ‹

ΠŸΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ ΠΌΠΎΠΆΠ½ΠΎ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ ΠΌΡƒΠ»ΡŒΡ‚ΠΈΡΠ·Ρ‹Ρ‡Π½Ρ‹ΠΌ Π±Π΅Π· особых ΠΏΡ€ΠΎΠ±Π»Π΅ΠΌ. React-native-localize β€” ΠΎΡ‚Π»ΠΈΡ‡Π½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ позволяСт Ρ€Π°ΡΡˆΠΈΡ€ΠΈΡ‚ΡŒ ΠΊΡ€ΡƒΠ³ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»Π΅ΠΉ прилоТСния.

Π˜ΡΡ…ΠΎΠ΄Π½Ρ‹ΠΉ ΠΊΠΎΠ΄ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π° находится здСсь.

Skillbox Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΠ΅Ρ‚:

Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: habr.com