Css 如何仅在react native中更改活动按钮的颜色

有四个按钮如何更改正在按下的活动按钮的颜色，以及在按下另一个按钮时如何将其更改回正常状态

我试过这个

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>

---

但是，当您在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>

state={active:null}；
{this.setState（{active:0}}}
style={this.state.active==0？style.btnActive:style.btn}>
城镇
{this.setState（{active:1}}}
style={this.state.active==1？style.btnActive:style.btn}>
城镇
{this.setState（{active:2}}}
style={this.state.active==2？style.btnActive:style.btn}>
城镇
{this.setState（{active:3}}}
style={this.state.active==3？style.btnActive:style.btn}>
城镇

在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>

state={active:null}；
{this.setState（{active:0}}}
style={this.state.active==0？style.btnActive:style.btn}>
城镇
{this.setState（{active:1}}}
style={this.state.active==1？style.btnActive:style.btn}>
城镇
{this.setState（{active:2}}}
style={this.state.active==2？style.btnActive:style.btn}>
城镇
{this.setState（{active:3}}}
style={this.state.active==3？style.btnActive:style.btn}>
城镇

问题在于您的代码对每个按钮都使用了

状态.active

样式。我要做的是将活动按钮索引或键存储在状态中，然后打开该状态以决定使用哪种样式

生活实例：

state={activeIndex:0}；
{this.setState（{activeIndex:0}}}
style={this.state.activeIndex==0？styles.btnActive:styles.btn}>
城镇
{this.setState（{activeIndex:1}}}
style={this.state.activeIndex==1？styles.btnActive:styles.btn}>
山丘
{this.setState（{activeIndex:2}}}
style={this.state.activeIndex==2？styles.btnActive:styles.btn}>
街头
{this.setState（{activeIndex:3}}}
style={this.state.activeIndex==3？styles.btnActive:styles.btn}>
道路
const styles=StyleSheet.create({
btn:{
对齐项目：“居中”，
背景颜色：“#DDDDDD”，
边框颜色：“#dc00ff”，
边界半径：10，
边框宽度：1，
填充：10，
},
b活动：{
对齐项目：“居中”，
背景颜色：“#dc00ff”，
边框颜色：“#dc00ff”，
边界半径：10，
边框宽度：1，
填充：10，
}
});

问题在于您的代码对每个按钮都使用了

状态.active

样式。我要做的是将活动按钮索引或键存储在状态中，然后打开该状态以决定使用哪种样式

生活实例：

state={activeIndex:0}；
{this.setState（{activeIndex:0}}}
style={this.state.activeIndex==0？styles.btnActive:styles.btn}>
城镇
{this.setState（{activeIndex:1}}}
style={this.state.activeIndex==1？styles.btnActive:styles.btn}>
山丘
{this.setState（{activeIndex:2}}}
style={this.state.activeIndex==2？styles.btnActive:styles.btn}>
街头
{this.setState（{activeIndex:3}}}
style={this.state.activeIndex==3？styles.btnActive:styles.btn}>
道路
const styles=StyleSheet.create({
btn:{
对齐项目：“居中”，
背景颜色：“#DDDDDD”，
边框颜色：“#dc00ff”，
边界半径：10，
边框宽度：1，
填充：10，
},
b活动：{
对齐项目：“居中”，
背景颜色：“#dc00ff”，
边框颜色：“#dc00ff”，
边界半径：10，
边框宽度：1，
填充：10，
}
});

您是否尝试为不同的按钮提供唯一的id？您是否尝试为不同的按钮提供唯一的id？

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