我正在为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;
但我还是解决不了。有什么建议吗?
1条答案
按热度按时间gjmwrych1#
看起来我没有导出我的翻译。所以我创建了translations.tsx文件并添加了以下代码
这是我用来翻译的代码: