reactjs - 如何在TouchableOpacity标签中嵌入的按钮标签中触发onPress而不触发TouchableOpacity中的onPress

Question

我有一个视图在展开状态为真之前一直处于隐藏状态。按下 TouchableOpacity 时，它在 toggleView 中设置为 !expand。但是，当我单击按钮以添加到购物车和删除时，视图也会被切换。我怎样才能防止这种情况发生？

return (
    <View style={styles.accordion}>
        {/* Visible Bar which is pressed to expand hidden view */}
        <TouchableOpacity onPress={toggleView} style={styles.collapsibleBar}>
            <Icon name={expanded ? 'chevron-down-outline' : 'chevron-right-outline'} pack='eva' fill='grey' style={styles.icon} />
        <View style={styles.itemHeader}>
            <View style={styles.itemHeaderTextView}>
                {/* HEADER STUFF */}
            </View>

            <View style={styles.buttonView}>
                 <Button onPress={() => addToCart()}>
                Add to Cart
                   </Button>
                <Button onPress={() => delete()}>
                delete
                   </Button>
                </View>
            </View>
        </TouchableOpacity>
        {/* Hidden View */}
        <View style={{ maxHeight: height, width: '100%', alignSelf: 'center' }}>
            <>
            {console.log(expanded)}
            {expanded && ExpandedChild({
                setHeight: setHeight,
                date: props.cargoCharge.storageDueDate, tableData: props.cargoCharge.charges
            })}
            </>
        </View>
    </View>);

标签： reactjstypescriptreact-native

Answer 1

TouchableOpacityCiao，试着像这样用 2 替换内部按钮。如果单击 internal TouchableOpacity，事件将不会传播到 external TouchableOpacity。