React Native导航问题：点击卡片无法跳转至下一页面

我帮你梳理几个最可能的原因和对应的解决步骤，你可以逐一排查：

1. 先确认App.js的导航配置是否正确 #

首先要保证DeliveryScreen已经在导航容器里注册，并且MainScreen处于导航栈中。比如你的App.js应该类似这样配置：

import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import MainScreen from './path/to/MainScreen';
import DeliveryScreen from './path/to/DeliveryScreen';

const Stack = createStackNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator initialRouteName="Main">
        <Stack.Screen name="Main" component={MainScreen} />
        {/* 这里的name要和你后续调用navigate时的参数一致 */}
        <Stack.Screen name="Delivery" component={DeliveryScreen} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

2. 检查MainScreen是否正确获取到navigation对象 #

不管你用的是函数组件还是类组件，都要确保能拿到navigation属性：

函数组件的两种方式： #

• 直接从props解构：

const MainScreen = ({ navigation }) => {
  const handleCardPress = () => {
    // 注意这里的名字要和App.js里Stack.Screen的name完全匹配（大小写敏感）
    navigation.navigate('Delivery');
  };

  return <ListCard onPress={handleCardPress} />;
};

• 使用useNavigation钩子（适合嵌套较深的场景）：

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

const MainScreen = () => {
  const navigation = useNavigation();
  
  const handleCardPress = () => {
    navigation.navigate('Delivery');
  };

  return <ListCard onPress={handleCardPress} />;
};

类组件的方式： #

如果是类组件，要确保this.props.navigation可用，或者用withNavigation高阶组件包裹：

import { withNavigation } from 'react-navigation';

class MainScreen extends React.Component {
  handleCardPress = () => {
    this.props.navigation.navigate('Delivery');
  };

  render() {
    return <ListCard onPress={this.handleCardPress} />;
  }
}

export default withNavigation(MainScreen);

3. 确认ListCard组件正确传递了点击事件 #

很多时候问题出在ListCard内部——你需要把接收到的onPress绑定到可点击的原生组件上，比如TouchableOpacity、TouchableHighlight，而不是普通的View：

// ListCard.js的正确示例
import { TouchableOpacity, View, Text } from 'react-native';

const ListCard = ({ onPress }) => {
  // 必须把onPress绑定到TouchableOpacity这类可点击组件上
  return (
    <TouchableOpacity onPress={onPress} style={/* 你的卡片样式 */}>
      <View>
        <Text>你的卡片内容</Text>
      </View>
    </TouchableOpacity>
  );
};

如果ListCard里用的是普通View，点击事件是不会触发的，因为View本身不响应触摸。

4. 排查其他常见坑 #

• 检查navigation.navigate的参数是否和Stack.Screen的name完全一致（大小写敏感，比如'Delivery'和'delivery'是两个不同的路由）
• 确认ListCard没有被其他设置了pointerEvents='none'的父组件遮挡
• 如果用了自定义的点击组件，要确保它正确转发了onPress事件

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