React Native Multi Language App

В тази публикация в блога ще ви кажа как лесно да интегрирате многоезична поддръжка с react native във вашето приложение.

С библиотеката, която използвам за това, react-i18next и i18next

Първо, създайте нов роден проект за реакция

npx react-native init multiLanguage

Нека добавим пакети към новото ви приложение

cd multiLanguage
npm i react-i18next i18next

Създайте нова папка в основната си директория, тя се нарича „Преводи“. и създайте файл index.js във вашата папка Translations.

След като създадете нова папка, тя извиква „ресурси“ под Преводи и създава файл 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

React Native Multi Language App

Подобни въпроси