React Native - 在按下时更改图标颜色答案

【问题标题】：React Native - change icon color on pressReact Native - 在按下时更改图标颜色
【发布时间】：2017-02-25 02:15:54
【问题描述】：

当“检查”图标被按下时，我希望它的颜色从默认的红色变为绿色。就我而言，虽然我有另一个 onpress 功能，但我使用了这个条件颜色语句

<Icon name="check" size={20} color={this.state.isCompleted ? '#1DA664' : '#DE5347'} onPress={() => this.isCompleted(rowData)} isCompleted={this.state.isCompleted}/>

我将此函数称为onpress

isCompleted(rowData){
     if (this.state.status != 'new'){
  this.itemsRef.child(rowData.id).update({
    status: 'completed'
  });
  this.setState({
    isCompleted: true
  })
}
}

当按下列表视图中的一个图标时，图标会改变颜色，但每次颜色改变都是最后一项的图标。

如图，

当我按下项目“煮午餐”时，它应该是煮午餐的图标变成绿色。相反，最后一项“你好”中的图标发生了变化。完全不知道做错了什么。感谢有人指导我。

提前致谢。

【问题讨论】：

包含图标的组件是否在一个单独的组件中，该组件已明确地将 isCompleted() 事件处理程序绑定到自身？另外，假设父组件使用 [some array].map() 来呈现任务，您是否为每个子组件分配了唯一的 ID？
嗨@androo，isCompleted在onpress时绑定到图标元素，所以如果isCompleted我做了它，那个图标颜色会改变。有什么方法可以在 isCompleted 函数中设置颜色吗？

标签： android reactjs react-native

【解决方案1】：

我的英语不好?。

通过创建一个带有 state 和 touchableOpacity 的按钮组件来解决这个问题

import React, {useState} from 'react';
import {View, TouchableOpacity} from 'react-native';
import Ionicons from 'react-native-vector-icons/Ionicons';

const Boton = () => {
  const [estado, setEstado] = useState(false);

  const agregarFavoritos = () => {
    setEstado(!estado);
  };

  console.log(estado);

  return (
    <View>
      <TouchableOpacity onPress={() => agregarFavoritos()}>
        <Ionicons
          name={estado ? 'md-heart' : 'md-heart-empty'}
          size={20}
          color="#ff6347"
        />
      </TouchableOpacity>
    </View>
  );
};

export default Boton;

然后我将组件导入到我希望它显示的位置

从 '../Botones/Boton' 导入 Boton；

然后我将导入组件“Boton”的地方称为“Boton”。

就绪，状态由组件'Boton'控制

【讨论】：

我一个字都听不懂。尝试使用翻译器（例如 deepl.com）并重新发布

【解决方案2】：

使用touchableHighlight，它具有onMouseDown和onMouseUp等效功能

<TouchableHighlight
  onPress={()=>{console.log("pressed");}}
  onShowUnderlay={()=>this.setState({touchableHighlightMouseDown:true})}
  onHideUnderlay={()=>this.setState({touchableHighlightMouseDown:false})}>
    <View>
        # Your other Views here
        <Icon color={this.state.touchableHighlightMouseDown?'#333333':(this.state.isCompleted ? '#1DA664' : '#DE5347')}
    </View>
</TouchableHighlight>

如果您只想在mouseDown 活动期间获得一些反馈（而不是任何特定的颜色更改），您可以简单地使用以下属性之一或两者

activeOpacity=0.8
underlayColor={'#EEE'}

【讨论】：

这有点不正确！如果您设置的设置比所有图像都说如果有超过 5 个图像，那么所有图像都将设置为新状态并且所有图像都将具有新颜色。这不会是特定的东西。
使 TouchableHighlight 扩展 React.Component ，现在每个部分都是具有自己状态的组件。现在你可以调用反应方式了。