使用Expo-localization和i18n-js响应本机项目 [英] React native project with expo-localization and i18n-js

查看:45
本文介绍了使用Expo-localization和i18n-js响应本机项目的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我目前正在尝试根据设备的系统语言来实现本地化,但是某些功能无法按要求工作.

i am currently trying to implement localization depending on the system language of the device but something is not working as required.

我遵循了expo文档上完全相同的代码,例如.对于按钮,我一直保持 [MISSING"EN-GB.LOGIN"翻译] ,而不是 LOGIN .

I followed the exact same code on expo documentation, for eg. for the button i have i keep getting [MISSING "EN-GB.LOGIN" TRANSLATION] instead of LOGIN.

这是我的代码:

welcomeScreen.js

welcomeScreen.js

import * as Localization from 'expo-localization';
import i18n from 'i18n-js';

i18n.translations = {
en: { login: 'LOGIN'},
ar: { login: 'تسجيل الدخول'},
};

i18n.locale = Localization.locale;
i18n.fallbacks = true;

function WelcomeScreen() {
return (

<Button
      title={i18n.t('login')}
    />
)}

所以我决定不使用上面的代码:

So instead of the code above i decided to go with this:

i18n.js

import i18n from 'i18n-js';
import * as Localization from 'expo-localization';
import ar from './locales/ar';  
import en from './locales/en';

i18n.translations = {  
'en': en,
'ar': ar,
};

i18n.locale = Localization.locale.search(/-|_/) !== -1? 
Localization.locale.slice(0, 2): Localization.locale;

i18n.fallbacks = true;

export default i18n; 

en.js

const en = { 
'SignUp':{
SignUp:"Sign Up"
}}

ar.js

const ar = {
'SignUp':{
SignUp:"الاشتراك"
}}

SignUpScreen.js

SignUpScreen.js

import I18n from '../config/i18n';

function RegisterScreen(props) {
return(
<Button title={I18n.t('SignUp.SignUp')}
)}

推荐答案

如果您尝试 console.log(Localization.locale) ...那就不只是 en ( i18n 所需的 i18n.translations 中的键)...它的形式为 en_countryCode 必须将其切成薄片

If you try to console.log(Localization.locale) ... it's not gonna be just en (the key in i18n.translations expected by i18n) ... it'd in the form of en_countryCode ... so you have to slice that part

  i18n.locale = Localization.locale.search(/-|_/) !== -1
    ? Localization.locale.slice(0, 2)
    : Localization.locale;

这篇关于使用Expo-localization和i18n-js响应本机项目的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆