Добавянето на многоезична поддръжка в проект на React Native може да бъде малко трудно, но с използването на i18n-js и expo-локализация става много по-лесно. В този блог ще преминем през стъпките за добавяне на поддръжка на много езици в многоекранен проект с помощта на тези две библиотеки.

Стъпка 1: Инсталирайте библиотеките Първо трябва да инсталираме i18n-js и expo-localization библиотеките. Можете да направите това, като изпълните следната команда в основната директория на вашия проект:

npm install i18n-js expo-localization

Стъпка 2: Конфигуриране на библиотеките След това трябва да конфигурираме библиотеките, като създадем нов файл, наречен i18n.js в основната директория на проекта. В този файл ще импортираме библиотеките i18n-js и expo-localization, ще зададем езика по подразбиране и ще конфигурираме преводите за всеки език. Ето пример за това как трябва да изглежда файлът i18n.js:

import i18n from 'i18n-js';
import * as Localization from 'expo-localization';

i18n.locale = Localization.locale;
i18n.fallbacks = true;
i18n.translations = {
  en: {
    greeting: 'Hello',
    goodbye: 'Goodbye'
  },
  fr: {
    greeting: 'Bonjour',
    goodbye: 'Au revoir'
  }
};

export default i18n;

Стъпка 3:Използвайте библиотеките във вашите компоненти Сега, след като библиотеките са инсталирани и конфигурирани, можем да започнем да ги използваме в нашите компоненти. За да направим това, трябва да импортираме файла i18n.js, който създадохме по-рано, и да използваме функцията i18n.t(), за да преведем текста в нашите компоненти. Ето пример как да използвате функцията i18n.t() в компонент:

import React from 'react';
import i18n from './i18n';

const MyComponent = () => {
  return (
    <View>
      <Text>{i18n.t('greeting')}</Text>
    </View>
  );
};

export default MyComponent;

Стъпка 4: Промяна на езика Ние също трябва да напишем код, за да променим езика от приложението. За целта можете да създадете функция във файла i18n.js и да я експортирате.

export function changeLanguage(lang) {
  i18n.locale = lang;
}

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

Това е! С тези стъпки вече трябва да имате React Native проект, който поддържа множество езици, използвайки i18n-js и експо-локализация. Имайте предвид, че може да се наложи да направите някои корекции на тези стъпки в зависимост от изискванията на конкретния ви проект.

Ако искате подробен блог за това как внедрих многоезичен превод за собственото си приложение. Оставете коментар и ще се радвам да го напиша.

Благодарим ви, че прочетохте тази статия. Не забравяйте да ръкопляскате/препоръчате колкото можете и също така споделяйте с приятелите си. Това означава много за мен.

Освен това нека станем приятели вTwitter, Linkedin и Github.