小编Kim*_*ako的帖子

我的 react-native 应用程序有 2 种语言：英语和法语。我已经为英语和法语做了一个 i18n.js 文件和 2 个“translation.js”文件。它工作得很好（我试过在手机上设置法语，在模拟器上设置英语）。

现在，我想在应用程序的设置中创建一个按钮来为用户更改整个应用程序的语言，但我不知道什么函数调用以及如何创建它。

你能帮助我吗 ？非常感谢您的时间和帮助。

我的 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 …

我是 react-native 的新手，我正在尝试从用户的设备获取当前语言环境。现在，我的应用程序有 2 个版本：法语和英语。当我更改后备语言时，它工作正常，我确实拥有该应用程序的两个版本。但是我无法直接从设备更改语言...

我在许多页面中都使用了 RNlocalize 但它对我不起作用......我的 App.js ：

  import React, { Component } from "react";
import I18n from "./src/i18n/I18n";
import * as RNLocalize from "react-native-localize";

async handleLocales() {
  this.locales = RNLocalize.getLocales();
}

getLocale() {
  if (this.locales) {
    if (Array.isArray(this.locales)) {
      return this.locales[0];
    }
  }
  return null;
}
class App extends Component {
  render() {
    return (
      <View>
        <Text>{I18n.t("hello")}</Text>
      </View>
    );
  }
}
export default App;

我的 i18n.js 文件：

import I18n from "i18n-js";
import * as RNLocalize from "react-native-localize"; …

我正在尝试测试我的应用程序，但无法使导航正常工作。当我测试导航以转到 Bottomtabnavigator 时，出现错误：

错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：对象。

这只是语法错误吗？感谢您的任何帮助。

应用程序.js

import React, { useState, useEffect } from 'react';
import AppContext from './AppContext';
import {NavigationContainer} from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import Authentication from './Screens/Authentication';
import Login from './Screens/Login';
import Register from './Screens/Register';
const AuthenticationStack = createStackNavigator();
import Splash from './src/components/Splash';
import BottomTabNavigator from './Navigation/StackNavigator';

export default function App() {

  const [user, setUser] = useState({ loggedIn: false });
  const state = { user, setUser };
  const [loading, setLoading] = useState(true);

  useEffect(() => { …