Добавянето на многоезична поддръжка в проект на 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.