React native 使用TouchableOpacity而不是TouchableWithoutheedback时，样式会中断

本部分的代码：

<TouchableWithoutFeedback>
    <View style={styles.buyCoinsItem}>
        <View style={styles.cost}>
            <Text>{no_of_coins}</Text>
        </View>
        <Text>{product.priceString}</Text>
        <View style={{height:30, flexDirection: 'row', marginTop:10}}>
            {displayDiscount && 
            <View style={styles.discountContainer}>
                <Text style={styles.whiteText}>Save {discount}</Text>
            </View>
            }
        </View>
    </View>
</TouchableWithoutFeedback>

{没有硬币}
{product.priceString}
{显示折扣&&
保存{折扣}
}

---

这是怎么回事？

这是如何实现这两个组件的一个恼人的副作用

本质上，

TouchableOpacity

是一个本机支持的视图，通过在该视图上调用

setNativeProps（{opacity}）

来支持触摸交互，而

TouchableWithoutFeedback

只是包装一个本机视图并附加触摸处理程序

为了使

无反馈可触摸

的行为类似于

可触摸不透明度

，在其内部嵌套一个额外的

视图

，并在子视图上定义任何样式：

之前：

<TouchableOpacity onPress={...} style={styles.touchable}>
  // Touchable content
</TouchableOpacity>

//可触摸内容

之后：

<TouchableWithoutFeedback onPress={...}>
  <View style={styles.touchable}>
    // Touchable content
  </View>
</TouchableWithoutFeedback>

//可触摸内容

我不知道为什么API是这样设计的——我猜应该是为了避免在不需要的时候出于性能原因创建额外的本机支持视图

---

然而，出于重构的目的，这使得在不同类型的可触摸屏之间移动稍微有点痛苦。在我的项目中，我通常会创建一个定制的可触摸组件，将这种逻辑封装在道具后面，或者使用类似的东西，在Android上提供Android材质风格的效果

Nvm，我想出来了。我基本上把

touchablepacity

切换到了外部

视图

。那么像这样,

<View style={styles.buyCoinsItem}>
    <TouchableOpacity>      
        <View style={styles.cost}>
            <Text>{no_of_coins}</Text>
        </View>
        <Text>{product.priceString}</Text>
        <View style={{height:30, flexDirection: 'row', marginTop:10}}>
            {displayDiscount && 
            <View style={styles.discountContainer}>
                <Text style={styles.whiteText}>Save {discount}</Text>
            </View>
            }
        </View>
    </TouchableOpacity>
</View>

{没有硬币}
{product.priceString}
{显示折扣&&
保存{折扣}
}

谢谢！这是有道理的，但是如果我想要我的

TouchableOpacity

表现得像

TouchableWithoutFeedback

？