リストアイテムの背景を変更する

Question

複数のリストアイテムを選択したときの背景色を変更するにはどうすればよいですか？私はreact-native-accordianとreact-native-collapsibleを使用しており、コンテンツ内にフラットリストを使用しています。

_renderContent(section, i, isActive) 
{ 
//console.log("MY DATA---",section.time_slots); 
    return (
    <List 
     style={inStyles.body} 
     containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}> 
     <FlatList 
      data={section.time_slots} 
      renderItem={ 
      ({ item,index }) => 
      (
      <ListItem 
      onPress={() => this.selectSlot(item,section.date,index)} 

      style = {[inStyles.list , {marginLeft : 15}, {marginRight : 5}, 
       {backgroundColor: (this.state.selectedItem[index]) ? 'green' : 'red'}]} 
       title={`${item}`} 
       containerStyle={{ borderBottomWidth: 0 }} 
      /> 
     ) 
     } 
      keyExtractor={item => section.date+item} 
      ItemSeparatorComponent={this.renderSeparator} 
      ListFooterComponent={this.renderFooter} 
      /> 
     </List> 
    ); 
} 

リスト項目のスタイルをTouchableOpacityで動的に変更したいだけです。しかし、そうすることはできません。

スクリーンショット

Answer 1

あなたは以下のようにコードを変更する必要があり、あなたのクラスは次のようになります：

contructor (props) { 
    super(props) 
    let selectedItemTemp = [] 
    for(let i=0; i<section.time_slots.length; i++) { //section.time_slots is your FlatList data 
     selectedItemTemp.push(false) 
    } 
    this.state = {selectedItem: selectedItemTemp} 
    } 


    selectSlot = (item, section.date, index) => { 
    let {selectedItem} = this.state 
    selectedItem[index] = !selectedItem[index] 
    this.setState({selectedItem}) 
    ... // your other codes 
    } 

    render() { 
    return (
     ... 
     <FlatList 
      data={section.time_slots} 
      renderItem={ 
      ({ item, index }) => (
       <TouchableOpacity 
       onPress={() => this.selectSlot(item,section.date, index)}> 
       <ListItem style = {[inStyles.list , {marginLeft : 15}, {marginRight : 5}, {backgroundColor: (this.state.selectedItem[index]) ? 'green' : 'white'}]} 
       title={`${item}`} 
       containerStyle={{ borderBottomWidth: 0 }} 
       /> 
       </TouchableOpacity> 
      ) 
      } {item => section.date+item} 
      ItemSeparatorComponeultiple Selectiont={this.renderSeparator} 
      ListFooterComponent={this.renderFooter} 
     /> 
     ... 
    ); 
    }