ネイティブ - プレス上のアイコンの色を変更する

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

リストビューのアイコンのいずれかが押され

ため、この関数を呼び出し、この条件付き色ステートメントを使用し、アイコンは色が変わりましたが、色の変化が最後の項目のアイコンになるたびに変わります。

PICに示すように、

私は項目を押すと「昼食を調理」、それは緑に調理昼食ターンのアイコンである必要があります。代わりに、最後の項目 'hello'のアイコンが変更されました。何が間違っているのか全く分かりません。誰かが私を導くことができたら大変感謝します。

ありがとうございました。

Answer 1

使用touchableHighlight、それはあなただけでmouseDown活動中いくつかのフィードバック（とない任意の特定の色の変更を）したい場合、あなたは、単にの次のいずれかまたは両方を使用することができます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> 

を持っていますプロパティ

activeOpacity=0.8 
underlayColor={'#EEE'}