Javascript React Native-如何使用UI动态更新应用程序语言？

我试图在我的react原生应用程序中实现本地化。但是，有一个问题我需要帮助

我正在使用以下代码更改我的应用程序语言

LangManager.js类

import * as RNLocalize from 'react-native-localize';
import i18n from 'i18n-js';
import memoize from 'lodash.memoize';
import en from './locales/en.js';
import nl from './locales/nl.js';

export const translate = memoize((key, config) => i18n.t(key, config));

export const setI18nConfig = lang => {
  // fallback if no available language fits
  const fallback = { languageTag: 'en', isRTL: false };

  // clear translation cache
  translate.cache.clear();
  // update layout directio
  // set i18n-js config
  i18n.translations = { en, nl };
  i18n.locale = lang;
};

export const changeLanguage = async lang => {
  setI18nConfig(lang);
  // AsyncStorage.setItem('language', lang);
};

export const isRTL = () => {
  return translate('lang') === 'ar' ? true : false;
};

要在我的屏幕中使用HomeScreen.js，我使用以下代码

import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { translate, changeLanguage } from '../lang_manager/LangManager';

const HomeScreen = () => {
    return (
        <View style={styles.container}>
            <Text>{translate('hello')}</Text>
            <Text>{translate('goodMorning')}</Text>
            <Text>{translate('currency')}</Text>
            <TouchableOpacity style={{ margin: 16, padding: 16, backgroundColor: 'blue' }}
                onPress={() => {
                    let count = Math.floor((Math.random() * 2));
                    if (count % 2 == 0) {
                        console.log("en : ", count);
                        changeLanguage('en');
                    } else {
                        console.log("nl : ", count);
                        changeLanguage('nl');
                    }
                }}>
                <Text>Change Language</Text>
            </TouchableOpacity>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center'
    }
});

export default HomeScreen;

从“React”导入React；
从“react native”导入{视图、文本、样式表、TouchableOpacity}；
从“../lang_manager/LangManager”导入{translate，changeLanguage}；
常量主屏幕=（）=>{
返回(
{translate（'hello'）}
{翻译（“早上好”）}
{translate（'currency'）}
{
让count=Math.floor（（Math.random（）*2））；
如果（计数%2==0）{
console.log（“en:”，count）；
更改语言（“en”）；
}否则{
日志（“nl:，计数）；
变更语言（“nl”）；
}
}}>
换语言
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
对齐项目：“中心”
}
});
导出默认主屏幕；

但是，每当我把语言从“en”改为“nl”或从“nl”改为“en”时，它都不会立即生效。我需要关闭并再次启动我的应用程序才能生效，或者设置状态

那么，有没有更好的方法让应用程序语言的更新立即生效呢

---

谢谢。

如果您的应用程序只有一个屏幕，则设置语言更改状态应足以重新呈现屏幕。但是，如果您也需要更改已安装的其他屏幕（甚至选项卡栏）上的语言，则必须在应用程序上强制重新渲染

您可以通过使用一个可用的重载函数来实现这一点。例如，如果您正在使用Expo，则可以使用Expo的更新：

import {Updates} from 'expo'

const HomeScreen = () => {

const {language, setLanguage} = useContext(global.LanguageContext);

  const onChangeLanguage = (value) => {
        setLanguage(value)
        changeLanguage(value)
        setTimeout(()=>Updates.reload(),500)
}

return(...)
}

一种简单的方法（如果您使用）：

---

嗯，更新将无法与react native cli一起使用。有其他解决方案吗？试试这个。forceUpdate（）；或者react native restart什么是“this.forceUpdate（）”，如果我使用的是功能组件，那么“this.forceUpdate（）”DevSettings.reload（）}/>

import { StackActions } from '@react-navigation/native';

navigation.dispatch(
  // replace with the screen where u changed the language
  navigation.dispatch(StackActions.replace('Settings')); 
);