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

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

2 个答案: