React Native，如何在语言更改后更新视图

Question

我想支持语言更改（由用户手动）。为此，我正在使用react-native-i18n。我找到了如何在运行时更改显示语言，但没有找到如何更新当前视图。

我的代码

环境

环境：

• 节点：8.9.4
• 纱线：1.3.2
• npm：4.0.5

预期行为

当我使用I18n.locale ='en';not in function.. 时，文本将使用英语，而当我使用时I18n.locale ='he';，文本将使用希伯来语。但是我需要在运行时更改语言。所以我希望当我点击每个按钮时，语言会改变并显示出来。

实际行为

什么也没发生.. 我想我需要重新加载/重新渲染/更新视图，但我没有找到方法。

Answer 1

你可以试试这样的

<View style={styles.container}>
    <Button onPress={this.setLocale()} title={strings('test.b1')}> 
</View>

public setLocale() {
    this.setState({stateOfLocale: 'en'});
    I18n.locale = stateOfLocale;
}

Answer 2

在我有按钮或选择更改语言的页面上，除非文本依赖于语言，否则什么都不会发生。

在每个字符串上，我都可以将区域设置作为可选参数传递，就像这样，{I18n.t("email", { locale: language })}如果它发生变化，这将立即导致重新渲染。

无需重新启动或刷新。

在下面的示例中，我使用选择来修改状态中的语言。由于可选的区域设置参数，文本字段依赖于它，并且将立即重新呈现。

为了保存更改，我实现了一个“保存”按钮，它将区域设置保存到 AsyncStorage 并调用在单独的 i18n.js 文件中定义的 ChangeLanguage 函数

import React, { useState } from "react";
import { View, Text, Button } from "react-native";
import I18n, { changeLanguage } from "../i18n/i18n";
import RNPickerSelect as Select from 'react-native-picker-select';
import AsyncStorage from '@react-native-async-storage/async-storage';

function ProfileScreen() {
  const locale = I18n.currentLocale();
  const [language, setLanguage] = useState(locale);

  const saveProfile = async () => {
    if (locale !== language) {
      AsyncStorage.setItem("language", language);
      changeLanguage(language);
    }
  }
  
  return (
  <View>
    <Text>{I18n.t("email", { locale: language })}</Text>
    <Select 
      value={language}
      onValueChange={(value) => setLanguage(value)}
      placeholder={I18n.t("selectAppLanguage")}
      items={[
        { label: I18n.t("English", { locale: language }), value: "en" },
        { label: I18n.t("Finnish", { locale: language }), value: "fi" },
        { label: I18n.t("Swedish", { locale: language }), value: "se" },
      ]}
    />
    <Button
      title={I18n.t("save", { locale: language })}
      onPress={saveProfile} 
    />    
  </View>
  );
}
export default ProfileScreen;

这是我的 i18n.js 文件。我正在使用react-native-localize，因为react-native-i18n不再维护，并且一旦发布就会在Android上产生问题。更改语言非常简单I18n.locale = lang

//i18n/i18n.js
import I18n from "i18n-js";
import * as RNLocalize from "react-native-localize";
import en from './languages/en';
import fi from './languages/fi';
import se from './languages/se';

const locales = RNLocalize.getLocales();

if (Array.isArray(locales)) {
  I18n.locale = locales[0].languageCode;
}

export const changeLanguage = lang => {
  if (lang) {
    I18n.locale = lang;
  } else if (Array.isArray(locales)) {
    I18n.locale = locales[0].languageCode;
  }
}

I18n.fallbacks = true;

I18n.translations = {
  en,
  fi,
  se,
};

export default I18n;

最后一件事，在 App.js 中，在应用程序启动时，我从 useEffect 内的本地存储中检索语言并覆盖设备的语言。所以语言得以保留。

//App.js
import React, { useEffect } from "react";
import I18n, { changeLanguage } from "./src/i18n/i18n";
import AsyncStorage from '@react-native-async-storage/async-storage';

function App() {
  useEffect(() => {
    const setLanguage = async () => {
      const language = await AsyncStorage.getItem("language");
      changeLanguage(language)
    }
    setLanguage()
  }, [])
  return ( // ...navigation, etc.
  );
}
export default <App />