React-Native: как изменить фон второго действия

Question

Проблема довольно проста, я думаю, но я не могу понять это. Я использую библиотеку act-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-роутер для навигации по сценам. Вот как я бы изменил цвет фона кнопки при нажатии:

    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>