React Native Navigation-无效的挂钩调用

Question

App.js：

import React, { useState } from "react";
import { Text } from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import Stack from "./navigation/Stack";

export default function App() {
  const [isReady, setIsReady] = useState(true);
  const onFinish = () => setIsReady(true);
  return isReady ? (
    <NavigationContainer>
      <Stack />
    </NavigationContainer>
  ) : (
      <Text>Loading...</Text>
    );
}

尝试通过自定义组件导航到屏幕：

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import Home from "../screens/Home";
import Detail from "../screens/Detail";

const Stack = createStackNavigator();

export default () => (
    <Stack.Navigator>
        <Stack.Screen name="Home" component={Home} />
        <Stack.Screen name="Detail" component={Detail} />
    </Stack.Navigator>
);

出现错误：

不变违反：无效的挂钩调用。钩子只能叫 在功能组件主体内部。

有人可以看看吗？