如何在点击ScrollView内的条目时触发事件？

当然可以做到！你只需要给Note组件的外层容器添加点击事件绑定即可，下面是具体的修改步骤和完整代码示例：

步骤1：在父组件中定义条目点击方法 #

首先在包含ScrollView的父组件里，新增一个处理条目点击的方法，比如：

// 父组件内新增的方法
onItemPress = (key, noteData) => {
  // 这里编写你点击条目后的业务逻辑，比如打印日志、跳转页面等
  console.log(`点击了第${key}条笔记`, noteData);
  // 示例：如果需要跳转，可以在这里调用导航方法
  // this.props.navigation.navigate('NoteDetail', { note: noteData });
};

步骤2：将点击方法传递给Note组件 #

在渲染notes数组的时候，把刚定义的onItemPress方法通过props传递给每个Note组件，就像你已经在做的deleteMethod和editMethod一样：

// 父组件内渲染notes的代码修改
let notes = this.state.noteArray.map((val, key)=>{ 
  return <Note 
    key={key} 
    keyval={key} 
    val={val} 
    deleteMethod={()=>this.deleteNote(key)} 
    editMethod={()=> this.editMethod(key, val)}
    onItemPress={()=> this.onItemPress(key, val)} // 新增这一行，传递点击方法
  />; 
});

步骤3：修改Note组件，添加点击事件响应 #

React Native中的View默认不支持点击事件，所以我们把Note组件的外层View替换成TouchableOpacity（你已经在使用这个组件，无需额外导入），并绑定传递过来的onItemPress方法：

// 修改后的Note组件代码
import React, { Component } from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';

export default class Note extends Component { 
  render() { 
    return (
      // 把外层View换成TouchableOpacity，并绑定onPress事件
      <TouchableOpacity style={styles.note} onPress={this.props.onItemPress}>
        <Text style={styles.noteText}>{this.props.val.date}{this.props.val.note}</Text>
        <TouchableOpacity onPress={this.props.deleteMethod} style={styles.noteDelete}>
          <Text style={styles.noteDeleteText}>Del</Text>
        </TouchableOpacity>
        <TouchableOpacity onPress={this.props.editMethod} style={styles.editNote}>
          <Text style={styles.noteDeleteText}>Edit</Text>
        </TouchableOpacity>
      </TouchableOpacity>
    ); 
  } 
}

const styles = StyleSheet.create({
  note: { 
    position: 'relative', 
    padding: 20, 
    paddingRight: 100, 
    borderBottomWidth:2, 
    borderBottomColor: '#ededed' 
  }, 
  noteText: { 
    paddingLeft: 20, 
    borderLeftWidth: 10, 
    borderLeftColor: '#0000FF' 
  }, 
  noteDelete: { 
    position: 'absolute', 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#2980b9', 
    padding: 10, 
    top: 10, 
    bottom: 10, 
    right: 10 
  }, 
  editNote: { 
    position: 'absolute', 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#2980b9', 
    padding: 10, 
    top: 10, 
    bottom: 10, 
    right: 70 
  }, 
  noteDeleteText: { color: 'white' }, 
});

说明 #

• 这样修改后，点击Note组件的任意区域（除了"Del"和"Edit"按钮）都会触发你定义的onItemPress方法，内部的按钮会优先响应自己的点击事件，不会产生冲突。
• 如果你不想使用TouchableOpacity，也可以用Pressable组件，用法类似，只需要替换外层容器并绑定onPress即可。

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