禁用TouchableHighlight onPress？

Question

如何禁用TouchableHighlight組，如果其中一個按下？可能嗎 ？例如，我有listview，每行有兩個TouchableHighlights。如果其中一人按下，我想禁用這兩個可觸摸的onPress功能。

Answer 1

這裏的一個選擇是使用一個非常基本的信號量。一旦單擊其中一個按鈕，就可以將全局變量x設置爲true。而在其他onPress功能，你可以返回，如果x爲true

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屬性當其中一個按鈕被點擊

Answer 2

我解決了這個問題。這是如何：

首先，感謝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); 
    } 
}