更改列表项的背景

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}
        />
      ...
    );
  }