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只是包装本机视图并附加触摸处理程序。 / p>

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

在：

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

后：

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

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

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

Answer 2

Nvm，我明白了。我基本上用外TouchableOpacity切换了View。所以，像这样：

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

使用TouchableOpacity而不是TouchableWithoutFeedback时样式中断

2 个答案: