我在使用React Navigation的React Native项目中遇到了导航问题。堆栈导航器没有按预期导航到下一个屏幕。下面是我的代码的简化版本：

// App.js
import React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import HomeScreen from './screens/HomeScreen';
import DetailsScreen from './screens/DetailsScreen';

const Stack = createStackNavigator();

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

字符串

// HomeScreen.js
import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import { useNavigation } from '@react-navigation/native';

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

  const handleNavigate = () => {
    navigation.navigate('Details');
  };

  return (
    <View>
      <Text>Welcome to the Home Screen!</Text>
      <TouchableOpacity onPress={handleNavigate}>
        <Text>Go to Details Screen</Text>
      </TouchableOpacity>
    </View>
  );
}

型
尽管有一个简单的导航设置，按下“转到详细信息屏幕”不会导航到详细信息屏幕。没有错误消息，我已经验证了屏幕名称匹配。
是否有人可以提供指导，说明如何解决堆栈导航器无法导航到下一个屏幕的问题？如果有任何见解或建议，我们将不胜感激。谢谢！