在触摸滚动视图项目时调用事件

Question

当我按下此ScrollView中的项目时，有没有办法调用事件？

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)} />
});
<ScrollView style={styles.scrollContainer}> {notes} </ScrollView>

注意：

import React, { Component } from 'react';

导入 { 视图 发短信 样式表， 可触摸不透明度， } 来自 'react-native';

导出默认类 注释扩展组件 { 渲染(( { 返回 ( {this.props.val.date} {this.props.val.note}

<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>
</View>
);
}
}

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'
},
});

Answer 1

您需要在"可触摸不透明度"下添加您希望在其中获取事件的所有项目：

<TouchableOpacity               
onPress={() => { 
alert('Pressed')
}}>
// Keep your element which you like to tap
</TouchableOpacity>

您可以参考 反应原生文档 获取更多参考。

Answer 2

你可以这样使用

let notes = this.state.noteArray.map((val, key)=>{
return <Note key={key} keyval={key} val={val}
deleteMethod={()=>this.deleteNote.bind(key)}
editMethod={()=> this.editMethod.bind(key, val)} />
});