1

我认为这个问题很简单,但我似乎无法弄清楚。我正在为按钮使用 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>

每当我按下它并且它处于活动状态时,我都想更改按钮的背景颜色。如果我单击另一个按钮,那么我刚刚按下的按钮将获得背景,而第一个按钮将返回正常的透明背景。我不太确定如何向按钮添加两个操作。如果有人可以提供帮助,我将不胜感激。我不一定需要使用按钮库,所以欢迎任何关于此的想法!

谢谢 !

4

1 回答 1

0

我使用通量路由器在场景中导航。这就是我在按下时更改按钮背景颜色的方式:

    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>
于 2017-04-04T05:16:39.453 回答