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忽略了新闻事件，因此我得到了两种不同的“效果”-标准{{1 }}点击事件（在按下开关以外的位置时）和标准TouchableOpacity点击事件（在按下开关本身时）。

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

Answer 1

您可以通过在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>

Answer 2

我想您希望在开关保持其正常行为的同时仅使文本可单击。如果是这样的话

像这样更改代码：

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

Answer 3

you need to give the value as a status value so that can change it.

can you try this code?

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

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

3 个答案: