单击使用react-native时如何更改图像和文本颜色？ [英] How to change image and text color when clicking using react-native?

问题描述

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

I am using TouchableHighlight, but I can change only background color using underlayColor. But how to change other content?

推荐答案

您可以使用样式更改所有内容。类似于：

You can change it all using styling. Something like:

<TouchableHighlight style={{ backgroundColor: 'red', height: 60, flexDirection: 'row' }}>
    <Text style={{ color: 'white' }}>Click Me</Text>
<TouchableHighlight>

我已经设置了一个带有几个按钮的示例项目此处，并将代码放在下面。希望这会有所帮助！

I've set up a sample project with a couple of buttons here, and placed the code below. Hope this helps!

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 (
      <View style={styles.container}>
        <TouchableHighlight 
        onPress={ () => this._changeStyle() }
        style={{ backgroundColor: this.state.backgroundColor, height: 60, flexDirection: 'row', alignItems:'center', justifyContent: 'center' }}>
                <Text style={{ fontSize: 22, color: this.state.color }}>CHANGE COLOR</Text>
        </TouchableHighlight>

        <TouchableHighlight style={{ backgroundColor: 'red', height: 60, flexDirection: 'row', alignItems:'center', justifyContent: 'center' }}>
          <Text style={{ color: 'white', fontSize:22 }} >Click Me</Text>
        </TouchableHighlight>
      </View>
    );
  }
});

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

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

这篇关于单击使用react-native时如何更改图像和文本颜色？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！