React Native-带有React导航和typescript的I18Next

Question

我开始了这个RN项目。我需要本地化，我尝试了很多解决方案。I18Next看起来非常适合我的需求。我不知道如何在自己的文件中定义它，并在App.tsx中调用它。我使用了useEffect，但我怀疑它是否明智——甚至在没有任何依赖关系的情况下更明智。以下是我尝试过的：

i18n.ts:

import i18next from 'i18next';
import { initReactI18next } from 'react-i18next';
import * as Localization from 'expo-localization';
import en from './en.json';
import fr from './fr.json';
const resources = {en: { translation: en }, fr: { translation: fr }};
i18next
// .use(languageDetector)
.use(initReactI18next)
.init({
fallbackLng: 'en',
debug: true,
resources,
lng: Localization.locale.slice(0, 2),
});
export default i18next;

App.tsx:中的代码

// ...
import i18next from './src/locales/i18n';
export default function App(): React.ReactElement {
useEffect(() => {
i18next
.init()
.then(() => {
// TODO - dispatch to redux when this is ready
})
.catch(error => console.warn(error));
});
return (
<Provider store={store}>
<PersistGate loading={<SplashScreen />} persistor={persistor}>
<StatusBar hidden />
<MainNavigation />
</PersistGate>
</Provider>
);
}

我收到警告i18next: init: i18next is already initialized. You should call init just once!。事实上，我调用了.init()两次——在主文件中，又在useEffect中。但我不知道该怎么做。

另外，我的useEffect还好吗？

[EDIT]我找到了https://react.i18next.com/latest/i18nextprovider在文档中，使用它并删除useEffect，警告就消失了——尽管我不确定这是否是个好主意，因为文档中声明了You will only need to use the provider in scenarios for SSR (ServerSideRendering) or if you need to support multiple i18next instances - eg. if you provide a component library.

Answer 1

实际上我只需要初始化它一次，也不需要使用提供程序。最后像这样钉住了：

const onBeforeLift = async () => {
await initI18Next();
};
export default function App(): React.ReactElement {
return (
<Provider store={store}>
<PersistGate
loading={<SplashScreen />}
persistor={persistor}
onBeforeLift={onBeforeLift}
>
<StatusBar hidden />
<MainNavigation />
</PersistGate>
</Provider>
);
}

并且在i18n.ts:中

const resources = {
en: { translation: en },
fr: { translation: fr },
he: { translation: he },
};
export const init = () => {
const lng = store.getState().user.language
? store.getState().user.language
: Localization.locale.slice(0, 2);
return (
i18next
.use(initReactI18next)
.init({
fallbackLng: 'en',
debug: true,
resources,
lng,
})
);
};
export default i18next;