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

Posted 2023-02-22

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

【英文标题】：How to change image and text color when clicking using react-native?

【发布时间】：2016-03-09 09:28:57

【问题描述】：

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

【参考方案1】：

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

【讨论】：

链接已失效

如何在 ListView 中工作。我将在 listView 中使用相同的代码，但不会更改其中的颜色。

这仅适用于单个项目，而不是一堆项目，如列表。

【参考方案2】：

此答案假设您想在按下按钮时更改颜色：

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

<TouchableWithoutFeedback onPressIn=this.colorText  onPressOut=this.resetText> 
  <Text style=[styles.textColored()]>MyText</Text>
</TouchableWithoutFeedback>

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;
  

【参考方案3】：

使用 TouchableHighlight 你可以这样做

state =  selected: false ;

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


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

然后在渲染函数中

<TouchableHighlight
    underlayColor=Theme.palette.accent
    onPress=() => onPress()
    onShowUnderlay=() => this.setSelected(true)
    onHideUnderlay=() => this.setSelected(false)
>
    <Text style=this.textStyle()>text</Text>
</TouchableHighlight>

【讨论】：

如何为多个选项卡实现此功能，一次单个选项卡应处于活动状态，其余选项卡将处于非活动状态以及如何为图像设置？