在React Native中更改TouchableOpacity的颜色 [英] Change color of TouchableOpacity in React Native

问题描述

任何人都可以帮助我. 这是我的源代码: https://snack.expo.io/rJFgyPDpH

Can anyone help me. This is my source code: https://snack.expo.io/rJFgyPDpH

想法是，如果我单击" 1按钮"，它应该是红色"，如果我单击"2按钮" ，它也应该更改其颜色设置为红色"，但"1按钮" 应更改为默认颜色黑色.但是，"2按钮" .

Idea is that, if I click to "1 Button" it should be 'red' and if I click to "2 Button" is also should change its color to 'red' but the "1 Button" should be changed to its default colour which is black. However, "2 Button".

如果我的方法太简单，则也欢迎使用其他方法(例如TouchableHighlight，ES6等).如果您能向我展示错误，以便从中学到东西，我将不胜感激.

If my approach is too simple, other methods (such as TouchableHighlight, ES6 and etc) are also welcomed. I appreciate if you show me mistakes so that I learn from that.

推荐答案

您可以编写如下代码:

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

现在，如果单击第一个按钮，则应为红色"，但第二个仍为黑色"背景.因此，如果单击第二个按钮，则该按钮应为红色"，而第一个按钮应为黑色".

Now If you click to the first button it should be 'red', but second, remains as 'black' background. Consequently, if you click to second button it should be 'red', whereas the first button should be 'black'.

这篇关于在React Native中更改TouchableOpacity的颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！