Question

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

我的代码

环境

环境：

节点：8.9.4
纱线：1.3.2
npm：4.0.5

预期行为

当我在功能中使用I18n.locale ='en';时，就像它一样，文本将是英文，当我使用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 })}，如果它发生变化，这将立即导致重新渲染。

无需重启或刷新。

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

为了保持更改，我实现了一个保存按钮，将区域设置保存到 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 />

Answer 3

以下是一些建议，

当您的应用初始化时，您可以设置I18n.locale

      I18n.locale = 'en'

当您尝试更改语言时，请确保所有组件都具有i18n翻译，即。 i18.t()即I18n.translate功能如下所示：

  ...
  <TouchableOpacity>
    <View>
     <Text>{I18n.t('LANG.CHANGE')}</Text>
   </View>
  </TouchableOpacity>
  ...

你的en.json

  ...
  { 
    'LANG': {
       'CHANGE': "Change Language"
     }
  }
  ...

关于语言更改，即更改i18.locale时，您可以通知连接到商店的所有组件，以便它们重新呈现，即典型的react-redux流程。

希望这有帮助。

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

我的代码

环境

预期行为

实际行为

3 个答案: