Как изменить цвет активной кнопки только в реакции родной

Question

есть четыре кнопки, как изменить цвет активной, нажимаемой и вернуть ее в нормальное состояние, если нажата другая кнопка

Я попробовал это

state = { active: styles.btn };

 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', }}>


          <View style={{ padding: 10 }}>
            <TouchableOpacity onPress={() => {this.setState({ active: styles.btnActive })}}
              style={this.state.active}>
              <Text> town </Text>
            </TouchableOpacity>
          </View>

          <View style={{ padding: 10 }}>
            <TouchableOpacity onPress={() => {this.setState({ active: styles.btnActive })}}
              style={this.state.active}>
              <Text> hill </Text>
            </TouchableOpacity>
          </View>

          <View style={{ padding: 10 }}>
            <TouchableOpacity onPress={() => {this.setState({ active: styles.btnActive })}}
              style={this.state.active}>
              <Text> street </Text>
            </TouchableOpacity>
          </View>

          <View style={{ padding: 10 }}>
            <TouchableOpacity onPress={() => {this.setState({ active: styles.btnActive })}}
              style={this.state.active}>
              <Text> road </Text>
            </TouchableOpacity>
          </View>

      </View>

const styles = StyleSheet.create({

  btn: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    borderColor: '#dc00ff',
    borderRadius: 10,
    borderWidth: 1,
    padding: 10,
  },
  btnActive: {
    alignItems: 'center',
    backgroundColor: '#dc00ff',
    borderColor: '#dc00ff',
    borderRadius: 10,
    borderWidth: 1,
    padding: 10,
  },

});

но вместо этого цвет всех кнопок меняется при нажатии одной кнопки

Answer 1

В React при каждом вызове this.setState() компонент перерисовывается.Ваши кнопки ищут this.state.active для своих стилей, поэтому всякий раз, когда нажимается одна кнопка, ваш this.state.active обновляется до стилей btnActive, которые вы передаете.Я бы порекомендовал вам дать каждой кнопке индекс, чтобы вам было легче различать кнопки.

Справедливое предупреждение: приведенный ниже код довольно статичен.Если вам нужно сделать это более динамичным (скажем, вы хотите генерировать кнопки на основе списка или чего-то еще), вам придется использовать цикл map или for, но идея индексирования останется прежней.

state = { active: null };

 <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', }}>

   <View style={{ padding: 10 }}>
     <TouchableOpacity 
       onPress={() => {this.setState({ active: 0 })}}
       style={this.state.active === 0 ? style.btnActive : style.btn }>
         <Text> town </Text>
     </TouchableOpacity>
   </View>

   <View style={{ padding: 10 }}>
     <TouchableOpacity 
       onPress={() => {this.setState({ active: 1 })}}
       style={this.state.active === 1 ? style.btnActive : style.btn }>
         <Text> town </Text>
     </TouchableOpacity>
   </View>

   <View style={{ padding: 10 }}>
     <TouchableOpacity
       onPress={() => {this.setState({ active: 2 })}}
       style={this.state.active === 2 ? style.btnActive : style.btn }>
         <Text> town </Text>
     </TouchableOpacity>
   </View>

   <View style={{ padding: 10 }}>
     <TouchableOpacity 
       onPress={() => {this.setState({ active: 3 })}}
       style={this.state.active === 3 ? style.btnActive : style.btn }>
         <Text> town </Text>
     </TouchableOpacity>
   </View>

 </View>

Answer 2

Проблема в том, что ваш код использует стиль state.active для каждой кнопки.То, что я сделал бы, это сохранить активный индекс кнопки или клавишу в состоянии, а затем включить это состояние, чтобы решить, какой стиль использовать.

Пример жизни: https://snack.expo.io/B1mPipDwr

     state = {activeIndex: 0};

     <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center', }}>
          <View style={{ padding: 10 }}>
            <TouchableOpacity onPress={() => {this.setState({ activeIndex: 0 })}}
              style={this.state.activeIndex === 0 ? styles.btnActive : styles.btn}>
              <Text> town </Text>
            </TouchableOpacity>
          </View>
          <View style={{ padding: 10 }}>
            <TouchableOpacity onPress={() => {this.setState({ activeIndex: 1 })}}
              style={this.state.activeIndex === 1 ? styles.btnActive : styles.btn}>
              <Text> hill </Text>
            </TouchableOpacity>
          </View>
          <View style={{ padding: 10 }}>
            <TouchableOpacity onPress={() => {this.setState({ activeIndex: 2 })}}
              style={this.state.activeIndex === 2 ? styles.btnActive : styles.btn}>              
              <Text> street </Text>
            </TouchableOpacity>
          </View>
          <View style={{ padding: 10 }}>
            <TouchableOpacity onPress={() => {this.setState({ activeIndex: 3 })}}
                style={this.state.activeIndex === 3 ? styles.btnActive : styles.btn}>
              <Text> road </Text>
            </TouchableOpacity>
          </View>
      </View>


const styles = StyleSheet.create({
  btn: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    borderColor: '#dc00ff',
    borderRadius: 10,
    borderWidth: 1,
    padding: 10,
  },
  btnActive: {
    alignItems: 'center',
    backgroundColor: '#dc00ff',
    borderColor: '#dc00ff',
    borderRadius: 10,
    borderWidth: 1,
    padding: 10,
  }
});