react-native - 使用 TouchableOpacity 而不是 TouchableWithoutFeedback 时样式会中断

Question

Here's how this part looks using TouchableWithoutFeedback

And here is the same thing, except with TouchableOpacity

这部分的代码:

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

这里发生了什么？

Answer 1

这是如何实现这两个组件的一个令人讨厌的副作用。

本质上，TouchableOpacity是一个原生支持的 View ，通过调用 setNativeProps({ opacity }) 支持触摸交互在这种情况下，而 TouchableWithoutFeedback只是简单地包装了一个原生 View 并附加了触摸处理程序。

为了使TouchableWithoutFeedback表现得像 TouchableOpacity , 嵌套一个额外的 View在其中，并在 subview 上定义任何样式:

前:

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

后:

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

我不确定为什么 API 是这样设计的 - 我的猜测是避免在不需要时出于性能原因创建额外的原生支持 View 。

然而，从重构的目的来看，这使得在不同类型的 Touchables 之间移动变得更加痛苦。在我的项目中，我通常会创建一个自定义的 Touchable 组件，将这个逻辑包装在一个 prop 后面，或者使用类似 react-native-platform-touchable 的东西。 ，在 Android 上为您提供 Android Material 风格的效果。