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

Question

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

我使用 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 也无济于事。

Answer 1

您可以通过使用 pointerEvents="none" 围绕您的 Switch 包装一个 View 来创建此行为。

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>