如何仅在本机反应中更改活动按钮的颜色答案

【问题标题】：How to change the color of a active button only in react native如何仅在本机反应中更改活动按钮的颜色
【发布时间】：2019-09-24 16:46:29
【问题描述】：

有四个按钮如何改变被按下的活动按钮的颜色，如果按下另一个按钮则将其恢复正常

我试过了

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

});

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

【问题讨论】：

你试过给不同的按钮一个唯一的ID吗？

标签： css reactjs react-native

【解决方案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>

【讨论】：

【解决方案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,
  }
});

【讨论】：