在 React Native 中更改 TouchableOpacity 的顏色

Question

誰能幫我。 這是我的源代碼： https : //snack.expo.io/rJFgyPDpH

想法是，如果我點擊“ 1按鈕”它應該是“紅色”，如果我點擊“2按鈕”也應該將其顏色更改為“紅色”但“1按鈕”應該更改為其默認顏色這是黑色的。 但是， “2 按鈕” 。

如果我的方法太簡單，也歡迎其他方法（例如TouchableHighlight 、 ES6 等）。 我很感激你告訴我錯誤，以便我從中吸取教訓。

Answer 1

試試下面

state={
    selectedButton: '',
};

      <View style={styles.container}>
          <TouchableOpacity
              style={{ backgroundColor: this.state.selectedButton === 'button1' ? 'red' : 'black', padding: 15}}
              onPress={() => this.setState({ selectedButton: 'button1' })}
          >
            <Text style={styles.text}>1 Button</Text>
          </TouchableOpacity>

          <TouchableOpacity
              style={{ backgroundColor: this.state.selectedButton === 'button2' ? 'red' : 'black', padding: 15}}
              onPress={() => this.setState({ selectedButton: 'button2' })}
          >
            <Text style={styles.text}>2 button!</Text>
          </TouchableOpacity>

      </View>

Answer 2

您可以編寫如下代碼：

import React, {Component} from 'react';
import {Platform, StyleSheet, Text, View, Button,TouchableOpacity} from 'react-native';

export default class App extends Component {
  state={
    backgroundColor: 'black',
    backgroundColor2: 'black',
    pressed: false,
  };

  changeColor(){
    if(!this.state.pressed){
       this.setState({ pressed: true,backgroundColor: 'red', backgroundColor2: 'black'});
    } else {
      this.setState({ pressed: false, backgroundColor: 'black' ,backgroundColor2: 'red'});
    }
  }
  render() {
    return (
      <View style={styles.container}>
          <TouchableOpacity
              style={{backgroundColor:this.state.backgroundColor, padding: 15}}
              onPress={()=>this.changeColor()}
                >
            <Text style={styles.text}>1 Button</Text>
          </TouchableOpacity>

          <TouchableOpacity
              style={{backgroundColor:this.state.backgroundColor2, padding: 15}}
              onPress={()=>this.changeColor()}
                >
            <Text style={styles.text}>2 button!</Text>
          </TouchableOpacity>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  text:{
    color:'white'
    },
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#fff',
  },
});

現在，如果您單擊第一個按鈕，它應該是“紅色”，但第二個按鈕仍然是“黑色”背景。 因此，如果您單擊第二個按鈕，它應該是“紅色”，而第一個按鈕應該是“黑色”。

Answer 3

changeColor=()=>{
   this.setState({
      backgroundColor:'red',
      backgroundColor2:'black'
   })
 }

  changeColor2=()=>{
    this.setState({
       backgroundColor:'black',
       backgroundColor2:'red'
   })
 }

根據您的要求，按第一個按鈕，它將調用 changeColor。 並且在按下第二個按鈕時，它會調用 changeColor2。

在代碼中，第二個按鈕的onPress，可以改為changeColor2而不是changeColor函數。

這個

 onPress={()=>this.changeColor2()}

代替

  onPress={()=>this.changeColor()}

Answer 4

通過傳遞 id，您可以交替更改顏色

import React, { Component } from 'react';
import { StyleSheet, TouchableOpacity, Text, View, Button } from 'react-native';

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = { colorId:0 };
  }
  onPress = (id) => {
    this.setState({colorId: id});
  };

  render() {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          style={this.state.colorId === 1? styles.red : styles.button}
          onPress={()=>this.onPress(1)}>
          <Text>Button1</Text>
        </TouchableOpacity>
        <TouchableOpacity
          style={this.state.colorId === 2? styles.red : styles.button}
          onPress={()=>this.onPress(2)}>
          <Text>Button2</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 10,
  },
  red: {
    backgroundColor: 'red',
    alignItems: 'center',
    padding: 10,
  },
  button: {
    alignItems: 'center',
    backgroundColor: '#DDDDDD',
    padding: 10,
  },
});

現場演示