React Native项目Home页点击卡片无法跳转Details页问题求助

• 1. 核心问题：导航路由未注册 #

  你仅在Home.js引入了Details组件，未在导航栈中注册对应路由，是此类问题最常见的诱因。请找到导航配置文件（通常为App.js或专用路由文件），在Stack导航器中添加Details路由配置，确保name属性值和跳转时使用的字符串完全一致（大小写敏感）：

  // 示例导航配置
  import { NavigationContainer } from '@react-navigation/native';
  import { createNativeStackNavigator } from '@react-navigation/native-stack';
  import Home from './Home';
  import Details from './Details';
  
  const Stack = createNativeStackNavigator();
  
  export default function App() {
    return (
      <NavigationContainer>
        <Stack.Navigator initialRouteName="Home">
          <Stack.Screen name="Home" component={Home} />
          {/* 必须添加此行完成Details路由注册 */}
          <Stack.Screen name="Details" component={Details} />
        </Stack.Navigator>
      </NavigationContainer>
    );
  }
  

• 2. 触摸事件拦截排查 #

  若路由已完成注册仍无法跳转，检查以下两种场景：
  • 卡片上层如果嵌套了ScrollView、其他Touchable系列组件，会抢夺触摸事件导致内层点击不触发，可调整组件嵌套层级，或给上层可点击组件添加pointerEvents="box-none"属性放行内层点击
  • 给TouchableOpacity临时添加红色背景测试可点击区域，确认整个卡片都在可点击范围内，避免样式问题导致点击区域过小无法触发

• 3. 其他常见配置错误 #

  • 确认navigation对象获取正常：如果Home组件不是直接挂载在导航栈的Screen下，无法直接拿到navigation prop，可改用useNavigation钩子获取导航对象：

    // Home.js顶部引入
    import { useNavigation } from '@react-navigation/native';
    // 组件内调用
    const navigation = useNavigation();
    

  • 你贴出的Home.js代码片段不完整，请确认组件最终是通过export default Home正常导出，且字体加载逻辑未卡住页面：如果useFonts返回的加载状态为false时持续返回AppLoading，页面会处于不可交互状态

• 4. 功能扩展 #

  修复跳转问题后，可在跳转时传递业务参数：

  onPress={() => navigation.navigate("Details", { itemId: item.id, itemData: item })}
  

  在Details页面通过route prop即可接收传递的参数。

内容的提问来源于stack exchange，提问作者Ibad hussain