React Родное многоязычное приложение

В этом посте я расскажу вам, как легко интегрировать многоязычную поддержку с React Native в ваше приложение.

С библиотекой, которую я использую для этого, react-i18next и i18next

Во-первых, создайте новый проект React Native.

npx react-native init multiLanguage

Давайте добавим пакеты в ваше новое приложение

cd multiLanguage
npm i react-i18next i18next

Создайте новую папку в корневом каталоге, она называется «Переводы». и создайте файл index.js в папке «Переводы».

После создания новой папки она вызывает «ресурсы» в разделе «Переводы» и создает файл index.js в папке ресурсов.

После этого укажите, какие языки вы хотите перевести, давайте создадим их файлы. Например, en.js для английского языка и fr.js для французского.

Вот ваша файловая структура должна быть такой

Откройте свой Translations/index.js и импортируйте библиотеки

import i18n from 'i18next';
import {initReactI18next} from 'react-i18next';

Теперь импортируйте папку ресурсов.

import * as resources from './resources';

Откройте файл resources/index.js и импортируйте файлы перевода.

export {default as en} from './en';
export {default as ar} from './ar';
export {default as fr} from './fr';
export {default as de} from './de';
export {default as tr} from './tr';

Давайте настроим библиотеку i18next на ваш Translations/index.js.

i18n.use(initReactI18next).init({
  compatibilityJSON: 'v3',
  resources: {
    ...Object.entries(resources).reduce(
      (acc, [key, value]) => ({
        ...acc,
        [key]: {
          translation: value,
        },
      }),
      {},
    ),
  },
  fallbackLng: 'en',
});

export default i18n;

Вот ваша полная версия Translations/index.js

import i18n from 'i18next';
import {initReactI18next} from 'react-i18next';
import * as resources from './resources';

i18n.use(initReactI18next).init({
  compatibilityJSON: 'v3',
  resources: {
    ...Object.entries(resources).reduce(
      (acc, [key, value]) => ({
        ...acc,
        [key]: {
          translation: value,
        },
      }),
      {},
    ),
  },
  fallbackLng: 'en',
});

export default i18n;

Импорт переводов в ваш App.js

import "./Translations";

Вот ваш полный пример кода о App.js

import React from 'react';
import {SafeAreaView, Text, View} from 'react-native';
import './Translations';

const App = () => {
  return (
    <SafeAreaView>
      <View>
        <Text>Test</Text>
      </View>
    </SafeAreaView>
  );
};

export default App;

Теперь давайте добавим текст в ваши файлы переводов, вот ваш пример Translations/resources/en.js

export default {
  home: {
    title: 'Home',
    description: 'This is the home page',
  },
};

Вот еще один язык из Турции. Я тоже хочу использовать tr.js

export default {
  home: {
    title: 'Anasayfa',
    description: 'Burası Anasayfadır',
  },
};

Теперь импортируйте использование перевода из библиотеки react-i18next в файл App.js.

Используя такой пример перевода

 <Text style={styles.title}>{t('home.title')}</Text>
   <Text style={styles.desc}>{t('home.description')}</Text>

Базовый пример для App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {SafeAreaView, StyleSheet, Text, View} from 'react-native';
import './Translations';
import {useTranslation} from 'react-i18next';

const App = () => {
  const {t} = useTranslation();
  return (
    <SafeAreaView>
      <View style={styles.baseContainer}>
        <Text style={styles.title}>{t('home.title')}</Text>
        <Text style={styles.desc}>{t('home.description')}</Text>
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  baseContainer: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: 'black',
  },
  desc: {
    fontSize: 18,
    color: 'black',
  },
});
export default App;

Давайте изменим язык при нажатии какой-либо кнопки.

Мы должны использовать i18n внутри useTranslation

  const {t, i18n} = useTranslation();

Это наша функция, когда нажмите кнопку, чтобы изменить язык

 const changeLangToTr = () => {
    i18n.changeLanguage('tr');
  };
  const changeLangToEn = () => {
    i18n.changeLanguage('en');
  };

Вот полный исходный код App.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React from 'react';
import {Button, SafeAreaView, StyleSheet, Text, View} from 'react-native';
import './Translations';
import {useTranslation} from 'react-i18next';

const App = () => {
  const {t, i18n} = useTranslation();

  const changeLangToTr = () => {
    i18n.changeLanguage('tr');
  };
  const changeLangToEn = () => {
    i18n.changeLanguage('en');
  };
  return (
    <SafeAreaView>
      <View style={styles.baseContainer}>
        <Text style={styles.title}>{t('home.title')}</Text>
        <Text style={styles.desc}>{t('home.description')}</Text>
        <Button title={t('home.buttonTr')} onPress={() => changeLangToTr()} />
        <Button title={t('home.buttonEn')} onPress={() => changeLangToEn()} />
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  baseContainer: {
    width: '100%',
    height: '100%',
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: 'black',
  },
  desc: {
    fontSize: 18,
    color: 'black',
  },
});
export default App;

Вот и все, мы закончили работу с несколькими языками в вашем приложении React Native.

Вы можете найти полный исходный код в моей учетной записи github