我在我的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中更新的语言环境。问题是在进行更改之前,子视图是使用第一个语言环境呈现的,我不明白为什么?
我无法找到更好的方法来做到这一点,任何想法/提示将不胜感激: - )
答案 0 :(得分:2)
这对我有用:
在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",
答案 1 :(得分:1)
答案 2 :(得分:0)
在反应本地博览会中很容易。
1-步骤1 安装和导入
expo install expo-localization
app.js
import { I18nManager } from 'react-native';
import * as Localization from 'expo-localization';
import i18n from 'i18n-js';
1-步骤2创建具有受支持语言的对象。
i18n.translations = {
en: { addPrice: 'add Price Here',subTax:' Sub Tax -'},
ar: {addPrice: 'ادخل السعر هنا' ,subTax:'قبل ضريبة - '}
};
// Set the locale once at the starting app.
i18n.locale = Localization.locale;
// When a value is missing from a language it'll fallback to another language with the key present.
i18n.fallbacks = true;
//don't change app dir to rtl.
I18nManager.forceRTL(false);
I18nManager.allowRTL(false);
1-步骤3随处使用
<TouchableOpacity >
<Text >{i18n.t('subTax')}</Text>
</TouchableOpacity>