React-為react-i18next呼叫useTranslation時掛鉤呼叫無效

我是新手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;

我正在嘗試做的是在每次添加翻譯時添加翻譯，BottomTabBar當title我BottomNavigationTab添加時，const { t, i18n } = useTranslation();我Invalid hook call不確定正確的位置/方式是什么。

感謝任何幫助，并提前感謝！

uj5u.com熱心網友回復：

您不能在 React 組件或鉤子之外呼叫鉤子（請參閱鉤子規則）。在組件const { t, i18n } = useTranslation();內移動這條線。 BottomTabBar像這樣：

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>)
};

標籤：javascript 反应 反应式 i18next 反应-i18next

上一篇：如何在一個命名匯出中收集多個命名的ES6匯出？

下一篇：【知其然，知其所以然】配置中心 Apollo原始碼剖析