Question

我在我的应用中实现了i18next，它在任何屏幕上都可以正常运行，但是我正在使用tabBarNavigation，并且我想翻译标签的标签。我的tabBarNavigation在stackNavigation中，也在switchNavigation中进行身份验证！这是我在App.js

中的代码

import React, {Suspense} from 'react';
import {
    StyleSheet, ScrollView, View, Text, StatusBar,
} from 'react-native';

import {withTranslation } from 'react-i18next';
import i18n from './App/Utility/Lang/index';

import DrawerNavigation from './App/Navigation/DrawerNavigation';
import ActivationStackNavigation from './App/Navigation/ActivationStackNavigation';
import AuthFlowNavigation from './App/Navigation/AuthFlowNavigation';
import MainStackNavigation from './App/Navigation/MainStackNavigation';
import TabBatNavigation from './App/Navigation/TabBatNavigation';

import {
    Header, LearnMoreLinks, Colors, DebugInstructions, ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';



const WrappedAuthFlowNav = ({t}) => {
    return <AuthFlowNavigation screenProps={{ t }} />;
};

const ReloadAppOnLanguageChange = withTranslation('common', {
    bindI18n: 'languageChanged',
    bindStore: false,
})(WrappedAuthFlowNav);


const App: () => React$Node = () => {
    return (
    <Suspense fallback={(<Text>Loading...</Text>)}>
        <ReloadAppOnLanguageChange/>
        </Suspense>
    );
};

export default App;

和语言配置代码：

import React from 'react';
import { Text, View, TouchableOpacity } from 'react-native';
import i18n from 'i18next';
import { initReactI18next, useTranslation } from 'react-i18next';
import locale from 'react-native-locale-detector';
import AsyncStorage from '@react-native-community/async-storage';
import ar from './ar.json';
import fr from './fr.json';
const STORAGE_KEY = '@APP:languageCode';
const languageDetector = {
    init: Function.prototype,
    type: 'languageDetector',
    async: true, // flags below detection to be async
    detect: async (callback) => {
        const savedDataJSON = await AsyncStorage.getItem(STORAGE_KEY);
        const lng = (savedDataJSON) ? savedDataJSON: null;
        const selectLanguage = lng || locale;
        console.log('detect - selectLanguage:', selectLanguage);
        callback(selectLanguage);
    },
    cacheUserLanguage: () => {}
};
i18n
    .use(languageDetector)
    .use(initReactI18next)
  .init({
    fallbackLng: 'ar',
    resources: { ar, fr},
    // have a common namespace used around the full app
    ns: ['common'],
    defaultNS: 'common',
    debug: true,
  //   cache: {
     //  enabled: true
    // },
    interpolation: {
      escapeValue: false, // not needed for react as it does escape per default to prevent xss!
    }
  });
export default i18n;

在我的tabBarNavigation中：

const TabNavigator = createMaterialTopTabNavigator(
  {
    TransValide: {
      screen: TransValide,
      navigationOptions: {
        tabBarLabel: {t('TransV:title')} // transV is an object in two files(fr.json and en.json)
      },
    },
    TransNonValide: {
      screen: TransNonValide,
      navigationOptions: {
        tabBarLabel: i18next.t('TransNV.convdate')
      },
    },
  }
);

通常我会像这样导出其他屏幕：

export default withTranslation(['ActCode', 'common'], { wait: true })(ActCode);

但是在tabBarNavigation中，我不知道该怎么做：

export default withTranslation(['TabNavigator', 'common'], { wait: true })(TabNavigator);

OR

export default createAppContainer(TabNavigator)

如何将i18next与tabBarNavigation结合使用

0 个答案: