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

Question

当按下“检查”图标时，我希望它将颜色从默认红色更改为绿色。在我的情况下，虽然我有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
  })
}
}

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

如图所示，

当我按下“烹饪午餐”项时，应该是烹饪午餐中的图标变为绿色。相反，最后一项'hello'中的图标已更改。完全不知道做错了什么。感谢有人指导我。

先谢谢了。

Answer 1

我的英语不好

通过创建具有状态和touchableOpacity的按钮组件来解决此问题

// example.vue
<script>
  export myMixin = { ... }

  // all mixins can interact with each other
  // because in the end they are a same object
  myToggle = { ... }
  mySuperComplicatedBit = { ... }
  // so B can call this.A

  export default {
    mixins: [
      myMixin,
      myToggle,
      mySuperComplicatedBit
    ],
    ...
  }
</script>
<template> ...

// other.vue or other.js
import { myMixin } from 'path/to/example' // .vue

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

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

然后我将导入组件“ Boton”的位置称为“ Boton”。

准备就绪，状态由组件“ Boton”控制

Answer 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'}