react-呼叫用户互动的react -i18next时无效的挂钩调用

Question

我是React Native的新手，我正在尝试在导航中添加翻译。在任何其他页面中，它都很好，但在我的导航中不行。

我的i18n.js

import i18n from 'i18next';
import { initReactI18next } from 'react-i18next';
import storage from '../app/services/storage';
import { USER_LANG, getDeviceLang } from './utils';

/** Localization */
import en from './en.json';
import es from './es.json';
import no from './no.json';
/** Localization */

/*---------------------------------
          LANGUAGE DETECTOR
---------------------------------*/
const languageDetector = {
  init: Function.prototype,
  type: 'languageDetector',
  async: true, // flags below detection to be async
  detect: async (callback) => {
    const userLang = await storage.get(USER_LANG);

    const deviceLang = userLang || getDeviceLang();
    //RNRestart.Restart();
    callback(deviceLang);
  },
  cacheUserLanguage: () => { },
};

/*---------------------------------
            I18N CONFIG
---------------------------------*/
i18n
  .use(languageDetector)
  .use(initReactI18next)
  .init({
    compatibilityJSON: 'v3',
    fallbackLng: 'en',
    resources: {
      en,
      es,
      no,
    },
    // have a common namespace used around the full app
    ns: ['translation'],
    defaultNS: 'translation',

    debug: true,

    //   cache: {
    //  enabled: true
    // },

    interpolation: {
      escapeValue: false,
    },
    react: {
      useSuspense: false,
    }
  });

export default i18n;

我的stacknavigators.js

import React, { useState, useEffect } from 'react';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { Keyboard } from 'react-native';
import TodayRates from '../pages/todayrates';
import Dashboard from '../pages/dashboard';
import UserService from '../services/userService';
import Profile from '../pages/profile';
import TodayActivities from '../pages/todayActivities';
import Tasks from '../pages/tasks';
import Task from '../pages/task';
import Settings from '../pages/settings';
import { BottomNavigation, BottomNavigationTab } from '@ui-kitten/components';
import { CreateTaskIcon } from '../assets/icons';

// For translation
import '../../i18n/i18n';
import { useTranslation } from 'react-i18next';
const { t, i18n } = useTranslation(); //<-- This is the issue and not sure where to add

const { Navigator, Screen } = createBottomTabNavigator();

const BottomTabBar = ({ navigation, state }) => (
    <BottomNavigation>
        <BottomNavigationTab title='Dashboard'/>
        <BottomNavigationTab title='Activities' />
        <BottomNavigationTab
            icon={<CreateTaskIcon fill="#fff" width={30} height={30} />}
        />
        <BottomNavigationTab title='Tasks' />
        <BottomNavigationTab title='Rates' />
    </BottomNavigation>
);

const StackNavigators = () => {
    const [user, setUser] = useState({});
    const [isKeyboardVisible, setIsKeyboardVisible] = useState(false);
    const getUser = async () => {
        await UserService.getCurrentUser().then((user) => {
            setUser(user);
        })
    }

    useEffect(() => {
        getUser();

        const showSubscription = Keyboard.addListener("keyboardDidShow", () => {
            setIsKeyboardVisible(true);
        });
        const hideSubscription = Keyboard.addListener("keyboardDidHide", () => {
            setIsKeyboardVisible(false);
        });
    
        return () => {
            showSubscription.remove();
            hideSubscription.remove();
        };
    }, [isKeyboardVisible]);

    const getVisibilityStyle = (keyboardVisibility, props) => {
        if (!keyboardVisibility){
            return <BottomTabBar {...props}/>;
        }
        return null;
    }

    return (
        <Navigator
            initialRouteName="Dashboard"
            tabBar={
                props => getVisibilityStyle(isKeyboardVisible, props)
            }>
            <Screen name="Dashboard" component={Dashboard} options={{ headerShown: false }} />
            <Screen name="Activities" initialParams={{ user: user }} component={TodayActivities} options={{ headerShown: false }} />
            <Screen name="+" component={Task} options={{ unmountOnBlur: true, headerShown: false }} />
            <Screen name="Tasks" component={Tasks} options={{ unmountOnBlur: true, headerShown: false }} />
            <Screen name="TodayRates" initialParams={{ user: user }} component={TodayRates} options={{ unmountOnBlur: true, headerShown: false }} />
            <Screen name="Profile" component={Profile} options={{ headerShown: false }} />
            <Screen name="Settings" component={Settings} options={{ headerShown: false }} />
            <Screen name="EditTask" component={Task} options={{ unmountOnBlur: true, headerShown: false }} />
        </Navigator>
    );
}

export default StackNavigators;

我要做的是在bottom tabbar 作为title的每个bottomnavigationTab，当我添加const {t，i18n} = usetranslation（）;我get <代码>无效挂钩调用，我不确定正确的位置/方式是什么。

感谢任何帮助，并提前感谢！

Answer 1

您不能在React组件或钩子之外调用钩子（请参阅挂钩规则） 。移动此行const {t，i18n} = usetranslation（）;在bottons tabbar component中。像这样：

const BottomTabBar = ({ navigation, state }) => {
    const { t, i18n } = useTranslation();
    return(
     <BottomNavigation>
        <BottomNavigationTab title='Dashboard'/>
        <BottomNavigationTab title='Activities' />
        <BottomNavigationTab
            icon={<CreateTaskIcon fill="#fff" width={30} height={30} />}
        />
        <BottomNavigationTab title='Tasks' />
        <BottomNavigationTab title='Rates' />
     </BottomNavigation>)
};