Измените язык всего приложения на собственном языке - PullRequest
Новая
       22

Измените язык всего приложения на собственном языке

0 голосов
/ 11 марта 2020

Мое приложение на реагирующем языке имеет 2 языка: английский sh и французский. Я сделал файл i18n. js и 2 файла "перевод. js" для engli sh и французского. Он отлично работает (я пробовал установить французский на моем телефоне, engli sh на эмуляторе).

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

Вы можете мне помочь? Большое спасибо за ваше время и помощь.

мой файл i18n. js; 

import i18n from "i18next";
import detector from "i18next-browser-languagedetector";
import { reactI18nextModule } from "react-i18next";
import { NativeModules, Platform } from "react-native";

import en from "../public/locales/en/translation.js";
import fr from "../public/locales/fr/translation.js";

// the translations
const resources = {
  en: {
    translation: en
  },
  fr: {
    translation: fr
  }
};
const locale =
  Platform.OS === "ios"
    ? NativeModules.SettingsManager.settings.AppleLocale
    : NativeModules.I18nManager.localeIdentifier;

i18n.locale = locale;

i18n
  .use(detector)
  .use(reactI18nextModule) // passes i18n down to react-i18next
  .init({
    resources,
    lng: locale.substring(0, 2),
    fallbackLng: "en", // use en if detected lng is not available

    keySeparator: ".", // we do not use keys in form messages.welcome

    interpolation: {
      escapeValue: false // react already safes from xss
    }
  });

export default i18n;

И я хотел бы изменить язык из моих настроек. js file: 

<SettingsList.Item
              // icon={<Image style={styles.image} source={require('../../assets/images/icon_vol-mute.png')}/>}
              title={i18n.t("settings.action.languages")}
              hasNavArrow={false}
              switchState={this.state.activeSwitch === 3}
              switchOnValueChange={this.switchThree}
              hasSwitch={true}
              onPress={() => Alert.alert("French / English")}
            />

1 Ответ

1 голос
/ 11 марта 2020

Если вы используете i18next

, вы можете i18next.changeLanguage использовать, чтобы изменить свой язык 

export const changeLaguage = (languageKey) => {
i18next.changeLanguage(lng, callback) // -> returns a Promise
}

import { changeLanguage } from 'services/translation';

<Button onPress={() => {changeLanguage(languageKey)}} />

Но я рекомендовал изменить на act-native * локализация вместо i18next simply in implementation и native performance

Как использовать react-native-localization?

Установка 

yarn add react-native-localization --save

#react-native >= 0.60
cd ios && pod install && cd ..

#react-native < 0.60
react-native link react-native-localization

Удалите переводы 

import LocalizedStrings from 'react-native-localization';
import english from './en.js'
import french from './fr.js'
import korean from './kr.js'

const strings = new LocalizedStrings({
 en: english,
 fr: french,
 kr: korean,
});

с en.js, fr.js, kr.js - файлы, содержащие ваши переводы в формате key value.

например: содержимое fr.js

export default {
ok: 'D'accord',
no: 'non'
}

Вы также можете использовать json тип файла для объявления.

использование 

import strings from 'services/translation';

<Text style={styles.title}>
  {strings.ok}
</Text>

Смена языков

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

const strings = new LocalizedStrings({
 en: english,
 fr: french,
 kr: korean,
});


export const changeLaguage = (languageKey) => {
strings.setLanguage(languageKey)
}

import { changeLaguage } from 'services/translation'


<Button onPress={() => {changeLanguage(languageKey)}} />

Примечания: Не объявляйте ключ одинаковым при использовании методов по умолчанию, таких как setLanguage

Подробнее о react-native-localization здесь
...