0

我在我的应用程序中使用 I18n 配置：

 I18n.translations = {
    en: en,
    fr: fr,
  };

  if (!__DEV__) {
    I18n.fallbacks = true;
  }

  I18n.defaultLocale = 'en';
  I18n.locale = localeLanguageTag as ELanguagesKeys;

然后我导出它并像往常一样使用它......

在一个组件中，我有一个带有一些翻译键的对象数组：

const onBordingSteps: ISteps = [
    {
      label: I18n.t('auth.heading.steps.onboarding.step1.title'),
      isCompleted: true,
      icon: GGValidation,
      iconHeight: 49.36,
      iconWidth: 28.48,
    },
    {
      label: I18n.t('auth.heading.steps.onboarding.step2.title'),
      isCompleted: false,
      .....
  ];

我在组件中创建此数组后直接使用它

return (
    <PreOnboarding
      steps={onBordingSteps}
    ...

但是当我从另一个文件导入这个数组时，它没有找到密钥，并且每个项目都有这个错误：

在此处输入图像描述
我不明白为什么......一个想法？

4

1 回答 1

0

也许这会对您有所帮助，因为我认为密钥的导出方法可能存在问题，因为找不到它们

在我的实现中，我像这样存储密钥

  1. 我有一个名为 Strings 的 js/ts 文件，用于存储密钥

import { translate } from "./I18n"

const Strings = {
  SOME_WORD: translate("keyName.firstWord"),
  ANOTHER_WORD:  translate("keyName.firstWord")
  ...
 }

  1. 在我的 l18n 文件中，我定义了一个translate函数（这样您就不必i18n-js在使用它的任何地方导入

import * as RNLocalize from "react-native-localize"
import i18n from "i18n-js"

import en from "./en"

const translations = { en }

const { languageTag } = RNLocalize.findBestAvailableLanguage(Object.keys(translations)) || {
  languageTag: "en",
}

i18n.locale = languageTag
i18n.fallbacks = true
i18n.translations = translations

export function translate(key: string) {
  return key ? i18n.t(key) : ""
}

export default i18n

  1. 在一个名为 en.ts 的单独文件中，我有实际的翻译

export default {
  keyName: {
    firstWord: "The actual translation",
    ...
    
   }
}

于 2021-05-12T11:20:22.550 回答