如何解决React Native-如何使用UI动态更新应用语言?
我试图在我的本机应用程序中实现本地化。但是,我需要解决一个问题。
我正在使用以下代码更改我的应用语言。
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”时,反之亦然,这并没有立即生效。我需要关闭并重新启动我的应用程序才能生效或设置状态。
那么,有没有更好的方法来立即更新应用程序语言更改呢?
谢谢。
解决方法
如果您的应用只有一个屏幕,则语言更改的settingState应该足以使屏幕重新呈现。但是,如果您还需要更改已经安装的其他屏幕(甚至选项卡栏)上的语言,则必须在应用程序上强制重新渲染。
您可以使用可用的重新加载功能之一来做到这一点。例如,如果您使用的是Expo,则可以使用Expo的更新:
0.7.0
0.7.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'));
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。