【问题标题】:Use same onPress handle with multiple TouchableOpacity使用具有多个 TouchableOpacity 的相同 onPress 句柄
【发布时间】:2018-03-20 15:53:18
【问题描述】:

我正在使用 GridView 显示多个产品,单击时我想转到详细信息屏幕,但是我无法找到一种方法来识别用户选择/点击了哪个产品网格视图单元格,我想发送一些参数处理方法应该可以解决问题。

return (

            <GridView
                itemDimension={130}
                items={this.state.dataSource}
                style={styles.gridView}
                renderItem={item => (
                    <View style={styles.itemContainer}>
                        <TouchableOpacity onPress={ this.onPressStone } style={styles.itemContainer}>
                            <Image source = {{uri:item.url}} style={styles.imageView} />
                            <Text style={styles.itemName}>{item.name}</Text>
                        </TouchableOpacity>
                    </View>
                )}
            />
);

【问题讨论】:

    标签: javascript react-native gridview


    【解决方案1】:

    你可以像你说的那样向你的函数发送参数。

    示例

    onPress={ () => this.onPressStone(item.id) }
    

    【讨论】:

    • 那么 onPressStone 的声明会怎样呢?
    • 好的,但是这个胖箭头函数让我有时会做,这是一个这样的情况,不明白它在这种情况下到底做了什么它是否返回一个指向这个函数的指针?
    • @vishaldharankar 基本上你创建了第二个在其中运行this.onPressStone 的函数。
    【解决方案2】:

    您可以将项目传递给 onPressStone 方法,并根据您可以执行的项目来打印您想要的内容。如果您想知道谁被按下了,您只需使用项目名称制作日志或以索引为例

    return (
    
            <GridView
                itemDimension={130}
                items={this.state.dataSource}
                style={styles.gridView}
                renderItem={(item, index) => {
                 //to know who was pressed:
                 console.log('pressedItemName-->', item.name);
                 //to know index pressed:
                 console.log('pressedItemName-->', item);
                  return (
                    <View style={styles.itemContainer}>
                        <TouchableOpacity onPress={ ()=> {this.onPressStone(item)} } style={styles.itemContainer}>
                            <Image source = {{uri:item.url}} style={styles.imageView} />
                            <Text style={styles.itemName}>{item.name}</Text>
                        </TouchableOpacity>
                    </View>
                )}
            />
    

    );

    【讨论】:

    • 这是不正确的,因为this.onPressStone(item) 将在组件呈现而不是按下时触发。
    • ops 是真的,我忘了放在里面 ()=>{}
    猜你喜欢
    • 1970-01-01
    • 2018-02-20
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-11-23
    • 2013-04-26
    • 2019-07-13
    • 2018-10-26
    相关资源
    最近更新 更多