Чтобы ваше приложение стало доступно большему количеству людей, вам в конечном итоге потребуется включить локализацию для ваших проектов. С точки зрения непрофессионала, это означает, что ваше приложение должно поддерживать несколько языков. Я думаю, что только 17% населения мира говорит по-английски, поэтому чем раньше вы адаптируетесь, тем быстрее ваше приложение сможет повлиять на другие рынки.

Установка библиотек

После запуска нового проекта вам нужно будет установить пару пакетов, чтобы начать работу. Это установит библиотеку, которую мы будем использовать для локализации, и экземпляр i18n, совместимый с React Native, используемый для настройки наших переводов.

yarn add react-native-localize i18n-js

Посетите страницы NPM react-native-localize и i18n-js, чтобы узнать больше.

Настройка проекта

После того, как вы установите библиотеки, необходимые для начала работы, нам нужно создать несколько вещей, чтобы все заработало. Обратите внимание, что я основывал свой подход на этом примере. С учетом сказанного, первое, что нам нужно сделать, это настроить библиотеку i18n-js.

Для этого вам нужно настроить запасной вариант

const fallback = {languageTag: "en", isRTL: false};

Затем вам нужно будет найти наилучший доступный язык, который соответствует языку системы из вашей конфигурации.

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

Мы делаем это, используя метод findBestAvailableLanguage в библиотеке react-native-localize (или используя мой запасной вариант, если ничего не возвращается или возникает ошибка).

После получения пользовательского языкового тега следующее, что нужно сделать, — это дополнительная настройка библиотеки i18, а затем добавление мемоизированной функции для извлечения перевода. Мы изолировали всю эту работу от хука useLocalization, показанного ниже, и просто вызываем configI18 в App.tsx приложения (или другого основного компонента/точки входа) и вызываем translate там, где это необходимо.

Где перевод json выглядит так

{
   "key1": "value1",
   "key2": "value2",
   "key3": "value3",
}

Наконец, чтобы вызвать перевод там, где это необходимо, вы просто вызываете этот код

translate(“key1”)

Если все работает, вы сможете переключить основной язык на своем устройстве, и копия внутри вашего проекта должна обновиться соответствующим образом.

Заключительные мысли

Спасибо за прочтение! Если вы фрилансер и хотите улучшить свою игру по написанию предложений и привлечь больше клиентов, попробуйте Бинго. Зайдите на наш веб-сайт, чтобы узнать больше и начать писать выигрышные предложения уже сегодня.