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';

import { 视图，文本，样式表 TouchableOpacity，来自'react-native';

export default class注意扩展Component { render（）{ 回来（ {} 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下添加您想要参加活动的所有项目：

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

您可以参考react-native doc以获取更多参考。

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

触摸ScrollView项目时调用事件

2 个答案: