React Native - 在印刷机上更改图标颜色

当按下'检查'图标时，我希望它将颜色从默认红色更改为绿色。在我的情况，而我对于为onPress其他功能，我用这个条件颜色声明React Native - 在印刷机上更改图标颜色

<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 
    }) 
} 
}

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

在PIC所示，

当我按项目“做午饭”，应该是在做午饭，依次为绿色的图标。相反，最后一个项目'hello'中的图标发生了变化。完全不知道什么是错的。感谢有人引导我。

谢谢先进。

来源

2017-02-25 jenna_3108

在独立组件中包含图标的组件是否将isCompleted（）事件处理程序显式绑定到自身？此外，假设父组件正在使用[some array] .map（）来渲染任务，您是否为每个子组件分配一个唯一的ID？ – Andrew

嗨@androo，isCompleted在onpress时绑定到图标元素，所以我做了它，如果isCompleted，该图标颜色会改变。有没有办法设置isCompleted函数内部的颜色？ –

使用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'}

来源

2017-02-25 05:49:40

React Native - 在印刷机上更改图标颜色

回答

相关问题