禁用 TouchableHighlight onPress？答案

【问题标题】：Disable TouchableHighlight onPress?禁用 TouchableHighlight onPress？
【发布时间】：2015-10-22 14:34:27
【问题描述】：

如果其中一个被按下，如何禁用 TouchableHighlight 组？是否可以？例如我有listview，每行有两个TouchableHighlights。如果其中一个被按下，我想禁用这两个可触摸的 onPress 功能。

【问题讨论】：

标签： reactjs react-native

【解决方案1】：

我解决了这个问题。方法如下：

首先，感谢James Ide 提供了很棒的button 组件和disabled 道具。

我为按钮组编写了自定义组件 --main.js--。并使用 disabled 道具禁用按钮组。

index.ios.js:

class PNTest extends React.Component{
  constructor(props){
    super(props)

    this.state ={
      clicked: []
    }
  }

  render(){
    return(
      <View style={styles.container}>
        <Main handleClick={this._handleClick.bind(this)} left={1} right={2} name={'group1'}/>
        <Main handleClick={this._handleClick.bind(this)} left={3} right={4} name={'group2'}/>
        <Text style={styles.welcome}>
          {this.state.clicked}
        </Text>
      </View>
    );
  }

  _handleClick(id, group){
    this.state.clicked.push(id);
    console.log(group + ' now inactive and clicked button id: ' + id);
    console.log('clicked button ids: ' + this.state.clicked);
  }
}

main.js:

class Main extends React.Component{
  constructor(props){
    super(props)

    this.state = {
      disabled: false,
      left: {},
      right: {}
    }
  }

  render(){
    return(
      <View style={styles.container}>
        <Button
          disabled={this.state.disabled}
          style={[styles.buttonContainer, this.state.left]}
          onPress={() => this._onPress(this.props.left)}>
          Left
        </Button>
        <Button
          disabled={this.state.disabled}
          style={[styles.buttonContainer,this.state.right]}
          onPress={() => this._onPress(this.props.right)}>
          Right
        </Button>
      </View>
    );
  }

  _onPress(id){
    var left = {};
    var right = {};

    if(id === this.props.left){
      left = styles.buttonSelected;
      right = styles.buttonNotSelected;
    }else if(id === this.props.right){
      right = styles.buttonSelected;
      left = styles.buttonNotSelected;
    }

    this.setState({
      disabled: true,
      left: left,
      right: right
    });

    this.props.handleClick(id, this.props.name);
  }
}

【讨论】：

【解决方案2】：

这里的一个选择是使用一个非常基本的信号量。单击其中一个按钮后，您可以将全局变量 x 设置为 true。而在另一个 onPress 函数中，如果 x 为真，则可以返回

onPressOne(){
 if(this.semaphore)
   return
 this.semaphore = true
 // other code here
}
onPressTwo(){
 if(this.semaphore)
   return
 this.semaphore = true
 // other code here
}

在您重置 this.semaphore = false 之前，按钮不会执行任何操作如果要禁用 TouchableHighlight 的视觉突出显示，可以在单击其中一个按钮时更改 activeOpacity 属性

【讨论】：

我不明白。每行都有相同的组件，比如说<Button />，而 Button 组件有两个可触摸的。如何处理禁用的行和其他处于活动状态的行。如果我发送这样的道具<Button isActive={this.semaphore} />，所有行都将被禁用。