单击使用react-native时如何更改图像和文本颜色？

我正在使用TouchableHighlight,但我只能使用underlayColor更改背景颜色.但是如何改变其他内容呢？

您可以使用样式更改所有内容.就像是:

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} = React;

var  colors = ['#ddd', '#efefef', 'red', '#666', 'rgba(0,0,0,.1)', '#ededed'];
var backgroundcolors = ['green', 'black', 'orange', 'blue', 'purple', 'pink'];

var SampleApp = React.createClass({

  getInitialState() {
    return {
        color: 'orange',
      backgroundColor: 'rgba(0,0,0,.1)'
    }
  },

  _changeStyle() {
    var color = colors[Math.floor(Math.random()*colors.length)];
    var backgroundColor = backgroundcolors[Math.floor(Math.random()*backgroundcolors.length)];
    this.setState({
        color: color,
      backgroundColor: backgroundColor
    })
  },

  render: function() {
    return (
      
         this._changeStyle() }
        row', alignItems:'center', justifyContent: 'center' }}>
                CHANGE COLOR
        

        
          Click Me
        
      
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:60
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

我已经建立了几个按钮的示例项目在这里,并放置下面的代码.希望这可以帮助!

https://rnplay.org/apps/k_6rtg

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TouchableHighlight
} = React;

var  colors = ['#ddd', '#efefef', 'red', '#666', 'rgba(0,0,0,.1)', '#ededed'];
var backgroundcolors = ['green', 'black', 'orange', 'blue', 'purple', 'pink'];

var SampleApp = React.createClass({

  getInitialState() {
    return {
        color: 'orange',
      backgroundColor: 'rgba(0,0,0,.1)'
    }
  },

  _changeStyle() {
    var color = colors[Math.floor(Math.random()*colors.length)];
    var backgroundColor = backgroundcolors[Math.floor(Math.random()*backgroundcolors.length)];
    this.setState({
        color: color,
      backgroundColor: backgroundColor
    })
  },

  render: function() {
    return (
      
         this._changeStyle() }
        row', alignItems:'center', justifyContent: 'center' }}>
                CHANGE COLOR
        

        
          Click Me
        
      
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:60
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

这个答案假设你想在按下按钮时改变颜色:

使用TouchableWithoutFeedback并定义自己的onPressIn和onPressOut函数来更改文本颜色.

 
  MyText


colorText: function() {
  this.setState({textColored: true});
},
resetText: function() {
  this.setState({textColored: false});
},
textColored: function() {
  if(this.state.textColored) {
    return styles.textColored;
  } else {
    return styles.textNormal;
  }
}

使用TouchableHighlight，您可以像这样

state = { selected: false };

setSelected(selected: boolean) {
    this.setState({ selected: selected });
}

textStyle() {
    return this.state.selected ? styles.textSelected : styles.text;
}

然后在渲染功能

 onPress()}
    onShowUnderlay={() => this.setSelected(true)}
    onHideUnderlay={() => this.setSelected(false)}
>
    {text}