如何使用i18 next/react-i18 next获取当前语言环境？

mfuanj7w 于 2022-11-25 发布在 React

关注(0)|答案(2)|浏览(267)

我是react-native的新手，我正在尝试从用户的设备中获取当前的区域设置。目前，我有两个版本的应用程序：法语和英语。当我改变后备语言时，它工作得很好。我确实有两个版本的应用程序。但我不能直接从设备上改变语言。
我们可以手动更改，但如果我们在设备上设置了法语，则无法直接获得法语。

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

const languageDetector = {
  type: 'languageDetector',
  async: true,
  detect: cb => cb('en'),
  init: () => {},
  cacheUserLanguage: () => {},
};

i18next
  .use(languageDetector)
  .use(initReactI18next)
  .init({
    fallbackLng: 'en',
    debug: true,
    resources: {
      en: {
        translation: {
          hello: 'Hello world',
          change: 'Change language',
        },
      },
      sv: {
        translation: {
          hello: 'Hallo!',
          change: 'Goedemorgen',
        },
      },
    },
  });

export default i18next;

App.js

import React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import { useTranslation } from 'react-i18next';
import './src/Traslations'

export default function App() {
  const { t, i18n } = useTranslation();
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      <Text style={{ fontSize: 20, marginBottom: 20 }}>{t('hello')}</Text>
      <Text style={{ fontSize: 20, marginBottom: 20 }}>{t('change')}</Text>

      <TouchableOpacity style={{backgroundColor: 'pink'}} onPress={() => i18n.changeLanguage(i18n.language === 'nl' ? 'en' : 'nl')}>
        <Text>{t('change')}</Text>
      </TouchableOpacity>
    </View>
  );
  }

react-native

来源：https://stackoverflow.com/questions/67770286/how-to-get-current-locale-with-i18next-react-i18next

2条答案

按热度按时间

6ljaweal1#

您的languageDetector使用en作为fallback...

确保您在设备中选择的 language-prefix 是sv〈〈--您在i18n设置中拥有的密钥...

const languageDetector = {
  type: 'languageDetector',
  async: true,
  detect: cb => cb('en'), // <<---- here
  init: () => {},
  cacheUserLanguage: () => {},
};

相反

您需要传递current-device-lang

import { Platform, NativeModules, Dimensions } from 'react-native';
const getDeviceLang = () => {
  const appLanguage =
    Platform.OS === 'ios'
      ? NativeModules.SettingsManager.settings.AppleLocale ||
        NativeModules.SettingsManager.settings.AppleLanguages[0]
      : NativeModules.I18nManager.localeIdentifier;

  return appLanguage.search(/-|_/g) !== -1
    ? appLanguage.slice(0, 2)
    : appLanguage;
};

detect: async callback => {
  const deviceLang = getDeviceLang();
  callback(appLanguage);
},

更多详细信息请参阅here工作示例...

赞(0）回复(0）举报 2022-11-25

b4lqfgs42#

i18next.resolvedLanguage或i18next.language或i18next.languages可能会有所帮助。

赞(0）回复(0）举报 2022-11-25