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

Question

我试图在我的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;

但是，每当我把我的语言从"en"改为"nl"，反之亦然，它都不会立即生效。我需要关闭并重新启动我的应用程序才能生效或设置状态。

那么，有没有更好的方法来更新应用程序语言更改并立即生效？

谢谢。

Answer 1

一种简单的方法(如果您使用React Navigation(：

import { StackActions } from '@react-navigation/native';
navigation.dispatch(
// replace with the screen where u changed the language
navigation.dispatch(StackActions.replace('Settings')); 
);

StackActions.replace

Answer 2

如果你的应用程序只有一个屏幕，那么语言更改时的settingState应该足以让屏幕重新呈现。然而，如果你也需要更改已经安装的其他屏幕(甚至选项卡栏(上的语言，你必须强制在应用程序上重新渲染。

您可以使用其中一个可用的重载函数来完成此操作。例如，如果您正在使用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(...)
}