首页 文章

触摸ScrollView项目时调用事件

提问于
浏览 次
0

当我按下 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'导入{View，Text，StyleSheet，TouchableOpacity，};

export default class注意扩展Component {render（）{return（

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

2 回答

  • 0

    您需要在TouchableOpacity下添加您想要参加活动的所有项目：

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

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

    回复于
  • 0

    你可以像这样使用

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

相关问题