Question

我正在尝试使React应用程序成为Android应用程序。创建项目并安装所有依赖项后，我想在导航器中使用Hook像这样：

const MainNavigator = createStackNavigator({
    Dashboard: DashboardScreen,
    ListSurveyor: {
        screen: topSurvayorsNavigator,
        navigationOptions: ({ navigation }) => {
            const dispatch = useDispatch();
            const [term, setTerm] = useState('');

            const searchServeyor = (item) => {
                console.log('nav: ', item);
                dispatch(survayouActions.searchSurveyouList(item))
            }
            switch (navigation.state.routes[navigation.state.index]["routeName"]) {
                case "ActiveSurveyor":
                    return {
                        header: () => <CustomHeader
                            title='Active'
                            // term={term}
                            // onTermChange={setTerm}
                            onTermSubmit={searchServeyor}
                        />
                    }

                case "DeActiveSurveyor":
                    return {
                        header: () => <CustomHeader
                            title='DisActive'
                            onTermSubmit={searchServeyor}
                        />
                    }
                default:
                    return { title: (navigation.state.routes[navigation.state.index]["routes"])[(navigation.state.routes[navigation.state.index]["index"])].routeName }
            }
        }
    },
    Audited: AuditedFileNumSurveyor,
}, {
    defaultNavigationOptions: defaultNavOptions
});

我导入了useState和useDispatch，如下所示：

import React, { useState } from 'react';
import { useDispatch } from "react-redux";

但是当我运行应用程序时，出现此错误：

无效的挂钩调用。挂钩只能在功能组件的主体内部调用。发生这种情况可能是由于以下原因之一：1.您可能使用了不匹配的React和渲染器版本（例如React DOM）2.您可能违反了《胡克规则》 3.您可能在其中包含多个React版本相同的应用程序，以获取有关如何调试和解决此问题的提示。

我在方法navigationOptions: ({ navigation }) => {中使用了钩子，但是会发生什么呢？

这是package.json信息：

{
  "name": "RNMngm",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "start": "react-native start",
    "test": "jest",
    "lint": "eslint ."
  },
  "dependencies": {
    "base-64": "^0.1.0",
    "prop-types": "^15.7.2",
    "react": "16.9.0",
    "react-native": "0.61.5",
    "react-native-charts-wrapper": "^0.5.7",
    "react-native-gesture-handler": "^1.5.2",
    "react-native-paper": "^3.4.0",
    "react-native-reanimated": "^1.4.0",
    "react-native-svg": "^10.0.0",
    "react-native-vector-icons": "^6.6.0",
    "react-navigation": "^4.0.10",
    "react-navigation-drawer": "^2.3.3",
    "react-navigation-header-buttons": "^3.0.4",
    "react-navigation-material-bottom-tabs": "^2.1.5",
    "react-navigation-stack": "^1.10.3",
    "react-navigation-tabs": "^2.7.0",
    "react-redux": "^7.1.3",
    "redux": "^4.0.5",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "7.7.7",
    "@babel/runtime": "7.7.7",
    "@react-native-community/eslint-config": "0.0.5",
    "babel-jest": "24.9.0",
    "eslint": "6.8.0",
    "jest": "24.9.0",
    "metro-react-native-babel-preset": "0.56.3",
    "react-test-renderer": "16.9.0"
  },
  "jest": {
    "preset": "react-native"
  }
}

Answer 1

挂钩只能在组件中使用，而不能在导航器或navigationOptions中使用。如果您需要在navigator或navigationOptions中使用状态，则需要在组件中设置setParams，然后在navigationOptions

中使用getParam方法。

React Native：无效的钩子调用

1 个答案: