如何仅在本机反应中更改活动按钮的颜色 [英] How to change the color of a active button only in react native

问题描述

有四个按钮如何改变正在按下的活动按钮的颜色并在按下另一个按钮时将其恢复正常

there are four buttons how to change the color of the active one being press and change it back to normal if the other button is pressed

我试过了

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,
  },

});

但是当按下一个按钮时所有按钮的颜色都会改变

but instead all the buttons color are changing when one button is press

推荐答案

在 React 中，每当您执行 this.setState() 调用时，组件都会重新渲染.您的按钮正在寻找 this.state.active 的样式，因此只要按下一个按钮，您的 this.state.active 就会更新为您使用的 btnActive 样式正在通过它.我建议您为每个按钮指定一个索引，以便您可以更轻松地区分按钮.

In React, whenever you do a this.setState() call the component get re-rendered. You buttons are looking to this.state.active for their styles, so whenever one button is pressed, the your this.state.active is getting updated to the btnActive styles you are passing it. I would recommend that you give each button an index so that you can distiguish between the buttons more easily.

公平警告下面的代码非常静态.如果您需要使其更加动态(假设您想根据列表或其他内容生成按钮)，您必须使用 map 或 for 循环，但是索引想法将保持不变.

Fair warning the code below is pretty static. If you need to make this more dynamic (say you want to generate buttons based on a list or something) you'd have to use map or a for loop, but the indexing idea would remain the same.

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>

这篇关于如何仅在本机反应中更改活动按钮的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！