React Native中TouchableOpacity onPress失效及StackNavigator导航报错求助

我一眼就瞅到几个关键小问题，都是React Navigation函数组件里常见的低级失误，咱们一步步来修正：

1. 函数组件误用this #

你定义的HomeScreen是函数组件，压根不存在this对象！你已经在组件参数里解构出了navigation，直接用它就行，完全没必要去拿this.props.navigation。

错误代码：

const {navigate} = this.props.navigation;

修正后：

const {navigate} = navigation;

2. 导出了错误的组件 #

你明明创建了导航容器ScheduledApp，但最后导出的却是单个HomeScreen组件——这直接导致整个导航系统没被启用，navigation属性自然无法传递到HomeScreen里！

把最后一行的：

export default HomeScreen;

改成：

export default ScheduledApp;

3. 遗漏TouchableOpacity的导入（大概率） #

你的代码里用了TouchableOpacity但没看到导入语句，记得补上：

import { TouchableOpacity, View, Text } from 'react-native';

修正后的完整代码 #

import React from 'react';
import { TouchableOpacity, View, Text } from 'react-native';
import CourseDetail from './CourseDetail';
import { StackNavigator } from 'react-navigation';
import Card from './Card'; // 假设你有这个自定义组件
import CardSection from './CardSection'; // 假设你有这个自定义组件

const HomeScreen = ({course, navigation}) =>{
  const {name,featured_image,id} = course;
  const {navigate} = navigation; // 直接使用解构好的navigation
  return(
    <TouchableOpacity onPress={() => navigate('CourseDetail', {id})}>
      <Card>
        <CardSection>
          <View style={styles.thumbnailContainerStyle}>
            {/* 简化条件渲染写法 */}
            {course.term_id !== '28' && (
              <Text style={styles.userStyle}>{name} </Text>
            )}
          </View>
        </CardSection>
      </Card>
    </TouchableOpacity>
  );
};

// 补上你的样式定义（假设你之前有写）
const styles = {
  thumbnailContainerStyle: {
    // 你的样式代码
  },
  userStyle: {
    // 你的样式代码
  }
};

const ScheduledApp = StackNavigator({
  Home:{ screen: HomeScreen },
  CourseDetail:{ screen: CourseDetail }
});

export default ScheduledApp; // 导出导航容器而非单个屏幕

额外优化小建议 #

• 把原来的三元渲染简化成了短路与写法，逻辑更清晰，也避免了空<View>的冗余。
• 确认Card、CardSection这些自定义组件都正确导入了，不然也会引发渲染错误。

改完这些之后，navigation就能正常传递给HomeScreen，onPress事件也会生效，点击就能顺利跳转到CourseDetail页面啦！

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