时间戳

首页 > 解决方案 > 如何禁用 TouchableOpacity 内的可点击开关？

javascript - 如何禁用 TouchableOpacity 内的可点击开关？

问题描述

在我的应用程序中，我有一行文本，并且在同一行上的辅助是一个开关。单击开关会更改其值，但我希望整行都可以单击并更改其值。

我最终使用以下代码TouchableOpacity：

<TouchableOpacity style={{flexDirection: 'row', alignItems: 'center'}} onPress={() => {this.setState({isAgree: !this.state.isAgree})}>
     <Text>Do you agree? </Text>
     <Switch value={this.state.isAgree} onValueChange={(n) => this.setState({isAgree: n})}/>
</TouchableOpacity>

该行是可点击的，并且应该做它应该做的事情，但是当点击Switch按下事件时TouchableOpacity，我会得到两种不同的“效果”——按下开关时的标准点击事件TouchableOpacity和按下开关Switch时的标准点击事件自行切换。

我尝试disabled={true}在开关上进行设置，它给出了我正在寻找的确切行为 - 除了开关变暗。玩弄zIndex或删除onValueChange也无济于事。

标签： javascriptreact-native

解决方案

您可以通过View在pointerEvents="none"您的Switch.

pointerEvents="none"防止触发 Switch 事件。相反，父事件（TouchableOpacity 的 onPress）将被触发。

   <TouchableOpacity style={{flexDirection: 'row', alignItems: 'center'}} onPress={() => {this.setState({isAgree: !this.state.isAgree})}}>
   <Text>Do you agree? </Text>
   <View pointerEvents="none">
    <Switch value={this.state.isAgree} onValueChange={(n) => this.setState({isAgree: n})}/>
   </View>
  </TouchableOpacity>

推荐阅读