在 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每个按钮的样式。我要做的是将活动按钮索引或键存储在状态中，然后打开该状态以决定使用哪种样式。

生活实例：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,
  }
});