使用 expo-localization 和 i18n-js 反应本机项目

Question

我目前正在尝试根据设备的系统语言实施本地化，但有些地方没有按要求工作。

我在 expo 文档中遵循了完全相同的代码，例如。对于我的按钮，我一直得到 [MISSING "EN-GB.LOGIN" TRANSLATION] 而不是 LOGIN.

这是我的代码：

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')}
    />
)}

所以我决定使用下面的代码而不是上面的代码：

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

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

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

Answer 1

如果你尝试 console.log(Localization.locale) ...它不会只是 en（i18n 预期的 i18n.translations 中的键）...它会以 en_countryCode 的形式......所以你必须切片那部分

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

使用 expo-localization 和 i18n-js 反应本机项目

React native project with expo-localization and i18n-js

localization

react-native

expo

i18n-js