如何在React-Native中从一个页面导航到另一个页面？我尝试使用导航，但得到错误:无效的钩子调用

npm install @react-navigation/native

npm install react-native-reanimated react-native-gesture-handler react-native-screens react-native-safe-area-context @react-native-community/masked-view

npm install @react-navigation/native-stack

import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';

const Stack = createNativeStackNavigator();

function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Details" component={DetailsScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

import { useNavigation } from '@react-navigation/native';

function HomeScreen() {
  const navigation = useNavigation();

  return (
    <Button
      title="Go to Details"
      onPress={() => navigation.navigate('Details')}
    />
  );
}

npm install react-native-navigation

import { Navigation } from 'react-native-navigation';

Navigation.registerComponent('HomeScreen', () => HomeScreen);
Navigation.registerComponent('DetailsScreen', () => DetailsScreen);

Navigation.setRoot({
  root: {
    stack: {
      children: [
        {
          component: {
            name: 'HomeScreen',
          },
        },
      ],
    },
  },
});

import { Navigation } from 'react-native-navigation';

function HomeScreen() {
  const goToDetails = () => {
    Navigation.push(componentId, {
      component: {
        name: 'DetailsScreen',
      },
    });
  };

  return (
    <Button
      title="Go to Details"
      onPress={goToDetails}
    />
  );
}