gpt4 book ai didi

react-native - 如何在 React Native Expo 应用程序中集成 i18n-js

转载 作者:行者123 更新时间:2023-12-04 19:30:25 25 4
gpt4 key购买 nike

我在 Expo 应用程序中实例化 I18n 时遇到问题。问题的 TL;DR 是需要翻译的组件在

Expo.Util.getLocaleAsync()

返回并设置语言环境。我不知道如何最好地设置它。到目前为止,我有一个 I18n 实例的文件,然后我将其导入并在我的应用程序中的其他任何地方使用。它看起来像这样:
import Expo from 'expo';
import I18n from 'i18n-js';
import english from './resources/strings/en';
import danish from './resources/strings/da';

I18n.defaultLocale = 'en-GB';
I18n.fallbacks = true;

I18n.initAsync = async () => {
var locale = 'en-GB';
try {
locale = await Expo.Util.getCurrentLocaleAsync();
} catch (error) {
console.log('Error getting locale: ' + error);
}

I18n.locale = locale ? locale.replace(/_/, '-') : '';
};

I18n.translations = {
en: english,
da: danish,
};

export default I18n;

然后,在我的根应用程序组件中,我执行以下操作:

从 './src/i18n' 导入 I18n;
class App extends React.Component {
async componentWillMount() {
console.log('Current locale (main1): ' + I18n.currentLocale());
try {
await I18n.initAsync();
} catch (error) {
console.log('Error setting locale ' + error);
}

console.log('Current locale (main2): ' + I18n.currentLocale());
}

render() {
return <AppContainer />;
}
}

Expo.registerRootComponent(App);

日志说明了预期值 - 首先是默认语言环境,然后是 main2 中更新的语言环境。问题是在更改之前使用第一个语言环境呈现 subview ,我不明白为什么?

我想不出更好的方法来做到这一点,任何想法/提示将不胜感激:-)

最佳答案

这对我有用:

main.js :

import I18n from 'react-native-i18n';

class App extends React.Component {
state = {
appIsReady: false,
}

async componentWillMount() {
await I18n.initAsync();
this.setState({appIsReady: true});
}

render() {
if (!this.state.appIsReady) {
return (
<AppLoading />
);
}
return (
<RootComponent>
);
)

在某些组件中:
import I18n from '../i18n';

render() {
return (
<View>
<Text>{I18n.t('favorites')}</Text>
<Text>{I18n.locale}</Text>
</View>
)
}

从我创建的根目录 i18n/index.js :
import I18n from 'react-native-i18n';

I18n.fallbacks = true; // let 'en-GB' fallback to 'en' if not found
I18n.translations = {
'en': require('./en.json'),
'nl': require('./nl.json'),
}

export default I18n;

我最初的荷兰语翻译文件在 i18n/nl.json :
{
favorites: 'Jouw Favorieten',
}

我的 package.json 中有这个:
"react-native-i18n": "git+https://github.com/xcarpentier/ex-react-native-i18n.git",

关于react-native - 如何在 React Native Expo 应用程序中集成 i18n-js,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44007731/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com