如何在反應原生GridView組件中更改可見性狀態？

Question

我正在研究react-native GridView組件，我想要更改GridView項目單擊的可見性狀態。

所以我有一個列表顏色網格，但是當我點擊單個項目時，它應該選擇並顯示一個刻度標記。

export default class filter extends Component { 
    constructor() { 
    super(); 
     this.state = { 
      gridDataSourceColor: filterColor, 
      isVisible: false, 
    }; 
    } 
render() { 
    return (
     <View> 
      <GridView 
       items={this.state.gridDataSourceColor} 
       itemsPerRow={6} 
       renderItem={this.renderColorItem.bind(this)} 
      /> 
     </View> 
    ); 
} 

onItemPressed(item){ 

} 

renderColorItem(item){ 
    return(
    <TouchableHighlight key={item.id} onPress={this.onItemPressed.bind(this, item)}> 
     <View 
      key={item.id} 
      style={{ 
       width: 50, 
       height: 45, 
       marginLeft: 2, 
       marginRight: 2, 
       justifyContent: 'center', 
       alignItems: 'center', 
       marginTop: 5, 
       backgroundColor: item.color}}> 

       <Image 
        style={{ 
         width: 25, 
         height:25}} 
        source={require('../images/check_mark_icon.png')} /> 
     </View> 
    </TouchableHighlight> 
); 
} 
} 

：在選擇

代碼

網格項目

電網項目

所以上面的代碼，當我做onItemPressed（）時，它應該改變狀態並顯示刻度標記。

請通過我的帖子，並建議我一些解決方案。

Answer 1

以isSelected於filterColor的產品。

onItemPressed(item){ 
var tempFilterColor = this.state.gridDataSourceColor; 
    for (var i=0; i< tempFilterColor.length; i++) 
    { 
     if (tempFilterColor[i].id == item.id) { 
     tempFilterColor[i].isSelected = true; 
     break; //Stop this loop, we found it! 
    } 
    } 
    this.setState({ gridDataSourceColor : tempFilterColor}); 
} 

renderColorItem(item){ 
    return(
    <TouchableHighlight key={item.id} onPress={this.onItemPressed.bind(this, item)}> 
     <View 
      key={item.id} 
      style={{ 
       width: 50, 
       height: 45, 
       marginLeft: 2, 
       marginRight: 2, 
       justifyContent: 'center', 
       alignItems: 'center', 
       marginTop: 5, 
       backgroundColor: item.color}}> 

       {this.renderCheckMark(item)} 
     </View> 
    </TouchableHighlight> 
); 
} 

renderCheckMark(item) 
{ 
    if(item.isSelected) { // image render only if item selected 
     return(
     <Image 
        style={{ 
         width: 25, 
         height:25}} 
        source={require('../images/check_mark_icon.png')} /> 
     ); 
    } 
}