我正在为Android创建react原生应用程序。我想使用i18next进行语言翻译。部署应用程序时出现以下错误

LOG  i18next::translator: missingKey en translation hello hello
 LOG  i18next::translator: missingKey en translation this line is translated this line is translated
 LOG  i18next: languageChanged hi
 LOG  hi
 LOG  i18next::translator: missingKey hi translation hello hello
 LOG  i18next::translator: missingKey hi translation this line is translated this line is translated
 LOG  i18next::translator: missingKey hi translation hello hello
 LOG  i18next::translator: missingKey hi translation this line is translated this line is translated

这是i18n.tsx代码

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import { useTranslation as useTranslationBase } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import translateen from './en.json';
import translatehi from './hi.json';

// Initialize i18n with the translations and configuration options
i18n
.use(LanguageDetector)
.use(initReactI18next).init({
  resources: {
    en: { translation: translateen },
    hi: { translation: translatehi },
  },
  fallbackLng: 'en',
  lng: 'en',
  debug: true,
  interpolation: {
    escapeValue: false,
  },
});

type TranslationKeys = keyof typeof translateen['translation'];

export const useTranslation = () => useTranslationBase<TranslationKeys>();

export default i18n;

这是我的App.tsx代码

import React, {useState} from 'react';
import {View, Text, Pressable} from 'react-native';
import {useTranslation} from './locales/i18n';

const App: React.FC = () => {
  const {t, i18n} = useTranslation();
  const [currentLanguage, setLanguage] = useState<string>('en');

  const changeLanguage = (value: string) => {
    i18n
      .changeLanguage(value)
      .then(() => setLanguage(value))
      .catch((err: Error) => console.log(err));
    console.log(i18n.language);
  };

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: 'white',
        alignItems: 'center',
        justifyContent: 'space-evenly',
      }}>
      <Text style={{fontWeight: 'bold', fontSize: 25, color: '#33A850'}}>
        {t('hello')}
      </Text>
      <Text style={{fontWeight: 'bold', fontSize: 25, color: '#33A850'}}>
        {t('this line is translated')}
      </Text>
      <Pressable
        onPress={() => changeLanguage('en')}
        style={{
          backgroundColor: currentLanguage === 'en' ? '#33A850' : '#d3d3d3',
          padding: 20,
        }}>
        <Text>Select English</Text>
      </Pressable>
      <Pressable
        onPress={() => changeLanguage('hi')}
        style={{
          backgroundColor: currentLanguage === 'hi' ? '#33A850' : '#d3d3d3',
          padding: 20,
        }}>
        <Text>हिंदी का चयन करें</Text>
      </Pressable>
    </View>
  );
};

export default App;

以下是我的hi.json代码，它位于locales文件夹中

{
  "translation": {
    "hello":"नमस्ते",
    "this line is translated":"यह पंक्ति अनुवादित है"
  }
}

我不知道如何解决这个问题。我已经参考了以下链接
react i18next throws translator missingKey en translation and useTranslation() hooks not working
Getting i18next translator Missing key
我甚至将我的i18n.tsx代码修改为以下代码

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import LanguageDetector from 'i18next-browser-languagedetector';
import translateen from './en.json';
import translatehi from './hi.json';

i18n
.use(initReactI18next).init({
  resources: {
    en: { translation: translateen },
    hi: { translation: translatehi },
  },
  fallbackLng: 'en',
  lng: 'hi',
  debug: true,
  interpolation: {
    escapeValue: false,
  },
});

export default i18n;

和我的App.tsx添加到以下

import React, {useState} from 'react';
import './locales/i18n';
import {View, Text, Pressable} from 'react-native';
import {useTranslation} from 'react-i18next';
const App: React.FC = () => {
  const {t, i18n} = useTranslation();
  const [currentLanguage, setLanguage] = useState<string>('en');

  const changeLanguage = (value: string) => {
    i18n
      .changeLanguage(value)
      .then(() => setLanguage(value))
      .catch((err: Error) => console.log(err));
    console.log(i18n.language);
  };

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: 'white',
        alignItems: 'center',
        justifyContent: 'space-evenly',
      }}>
      <Text style={{fontWeight: 'bold', fontSize: 25, color: '#33A850'}}>
        {t('hello')}
      </Text>
      <Text style={{fontWeight: 'bold', fontSize: 25, color: '#33A850'}}>
        {t('this line is translated')}
      </Text>
      <Pressable
        onPress={() => changeLanguage('en')}
        style={{
          backgroundColor: currentLanguage === 'en' ? '#33A850' : '#d3d3d3',
          padding: 20,
        }}>
        <Text>Select English</Text>
      </Pressable>
      <Pressable
        onPress={() => changeLanguage('hi')}
        style={{
          backgroundColor: currentLanguage === 'hi' ? '#33A850' : '#d3d3d3',
          padding: 20,
        }}>
        <Text>हिंदी का चयन करें</Text>
      </Pressable>
    </View>
  );
};

export default App;

但我还是解决不了。有什么建议吗？