繁体   English   中英

React-Native:如何更改后台第二个动作

[英]React-Native: How to change background second action

我认为问题很简单,但我似乎无法弄明白。 我使用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>

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

谢谢 !

我使用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>

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM