如何解决组件渲染时未初始化i18n
在我的expo应用程序中,我想使用i18n-js对字符串进行国际化。
问题在于,它是异步初始化的,并且组件的der渲染更快。因此,我得到“缺少xy翻译”的结果。渲染前如何实现初始化?
我发布了我的i18n组件。计划只是导入那个并使用它的功能t()。
import * as Localization from 'expo-localization';
import i18n from 'i18n-js';
i18n.translations = {
en: {
"hello": "Hello World!","signin": "Sign In","wrongPassword": "Wrong Password","Please enter a valid email address": "Please enter a valid email address","Username contains unallowed characters": "Username contains unallowed characters","No Acount? Sign Up": "No Acount? Sign Up","Password": "Password","Password is too short. Must be greater than 6 characters": "Password is too short. Must be greater than 6 characters","Passwords do not match": "Passwords do not match","Email address": "Email address","Enter password again":"Enter password again","Password Confirm":"Password Confirm","SIGN UP":"Sign Up","Already Signed Up? Sign In": "Already Signed Up? Sign In","You":"You","Your running games":"Your running games","New Game":"New Game","me": "me"
},de: {
"hello": "Hello World!","signin": "Einloggen","wrongPassword": "Falsches Passwort","Please enter a valid email address": "Bitte benutzen Sie eine valide Email Adresse","Username contains unallowed characters": "Benutzername enthält unerlaubte Zeichen","No Acount? Sign Up": "Kein Konto? Registrieren!","Password": "Passwort","Password is too short. Must be greater than 6 characters": "Passwort zu kurz. Bitte mindestens 6 Zeichen","Passwords do not match": "Passwörter stimmen nicht überein","Email address": "Email Adresse","Enter password again":"Passwort nochmal eingeben","Password Confirm":"Passwort bestätigen","SIGN UP":"Registrieren","Already Signed Up? Sign In":"Bereits registriert? Einloggen!","You":"Du","Your running games":"Deine laufenden Spiele","New Game":"Neues Spiel","me": "ich"
}
};
// Set the locale once at the beginning of your app.
i18n.locale = Localization.locale;
i18n.fallbacks = true;
const t = (text) => {
return i18n.t(text);
};
export default t;
解决方法
由于我无法直接解决上述问题,因此我的解决方法是实现自己的功能。就我而言,我仅提供两种语言,因此非常简单。 如果对其他人也有帮助,我感到很高兴:
import * as Localization from 'expo-localization';
import en from './en.json';
import de from './de.json';
// Set the locale once at the beginning of your app.
const locale = Localization.locale.split('-')[0];
const t = (key) => {
var v = null;
if (locale == 'de') {
v = de[key];
}
if (locale == 'en' || v == null)
v = en[key]
if (v == null)
v='t('+key+')';
return v;
};
export default t;
,
我发现了一个替代解决方案,以防您需要异步功能(例如,如果要在AsyncStorage中检查用户的首选语言)。您可以按如下所示在App.js中添加一个AppLoading组件:
在我的App.js中:
X+4
在我的i18n.js中:
import * as React from 'react';
import AppContainer from './Navigators/AppNavigationContainer.js'
import {Provider} from 'react-redux'
import store from './Reducer/store'
import {loadLocale} from './assets/locales/i18n'
import {AppLoading} from 'expo'
export default function App ({navigation}) {
[languageReady,setLanguageReady] = React.useState(false)
const init = async () => {
await loadLocale()
};
return(
<Provider store={store}>
{languageReady ? (
<AppContainer/>
) : (
<AppLoading
startAsync={init()}
onFinish={setLanguageReady(true)}/>
)}
</Provider>
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。