React-Native：如何更改背景第二個動作

Question

問題很簡單，我想，但我似乎無法弄清楚。我正在使用react-native-router-flux庫和NativeBase庫作爲按鈕。

這是我的代碼：

<Button transparent onPress={Actions.MainOne } style={{ width: 50, height: 50 }} > 
     <Text>Option1</Text> 
    </Button> 

    <Button transparent onPress={Actions.MainTwo} style={{ width: 50, height: 50 }} > 
      <Text>Option2</Text> 
    </Button> 

我想改變每當我按下按鈕的背景顏色和它的活躍。如果我點擊另一個按鈕，那麼我剛剛按下的按鈕將獲得背景，並且第一個按鈕會返回到正常的透明背景。我不確定我可以如何將兩個動作添加到按鈕。如果任何人都可以協助，我將不勝感激。我不需要使用按鈕庫，所以對此有任何想法都是值得歡迎的！

謝謝！

Answer 1

我使用flux-router來瀏覽場景。這是我如何在按下時更改按鈕的背景顏色：

constructor() { 
     super(); 
     state = { 
     color1: 'transparent', 
     color2: 'transparent', 
     } 
    } 

    setActive(button) { 
     if (button === 1) { 
     if (this.state.color1 === 'transparent') { 
      this.setState({ 
      color1: 'red', 
      color2: 'transparent' 
      }) 
     } 
     } else { 
     if (this.state.color2 === 'transparent') { 
      this.setState({ 
      color2: 'red', 
      color1: 'transparent' 
      }) 
     } 
     } 
    } 

    { . . . } 

    <Button 
     onPress={this.setActive.bind(this, 1)} 
     style={{ width: 50, height: 50, backgroundColor: this.state.color1 }} 
    > 
     <Text>Option1</Text> 
    </Button> 

    <Button 
     this.setActive.bind(this, 2) 
     style={{ width: 50, height: 50, backgroundColor: this.state.color2 }} 
    > 
     <Text>Option2</Text> 
    </Button>