5

这是使用 TouchableWithoutFeedback 时这部分的外观

这是同样的事情，除了 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>

这里发生了什么？

4

2 回答 2

8

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

本质上，TouchableOpacity它是一个原生支持的视图，它通过调用该视图来支持触摸交互setNativeProps({ opacity })，而TouchableWithoutFeedback它只是简单地包装一个原生视图并附加触摸处理程序。

为了使TouchableWithoutFeedback行为类似于TouchableOpacity，在其中嵌套一个附加View项，并在子视图上定义任何样式：

前：

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

后：

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

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

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

于 2018-01-08T19:10:13.473 回答
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>
于 2018-01-09T21:03:14.140 回答