javascript - React Native FlatList : render conditional style with dynamic data

Question

我是 React Native 和实现 FlatList 的新手，我在动态数据方面遇到了一些问题。我有总座位数和预订座位数的列表。

    this.state = {
        seats: props.route.params.seats, 
        reservedSeats: props.route.params.Reserved,
        date: new Date() 
    }

以下是我实现的FlatList

      <FlatList style={styles.flatListArea1} 
           contentContainerStyle={{margin:0}}
           data={this.state.seats}
           numColumns={4}
                        
           showsHorizontalScrollIndicator={false} 
           renderItem={({item}) => 
                            
              <View style={styles.containerIcons} key={item}>
                  <TouchableOpacity style={this.state.selectedItem === item ? styles.menuSelected : styles.menuTop }  onPress={ () => this.selectSeat(item)}>
                      <View style={styles.buttons}>
                        <Text style={styles.HallsText} key={item.key}>{item.Id}</Text>
                      </View>
                  </TouchableOpacity>
              </View>}
       />

在单击事件中，我可以更改颜色。如果有人可以帮助理解我们如何根据保留状态下呈现的动态数据重新渲染 FlatList，我将不胜感激。例如。今天的 5 个座位​​中，有 3 个已被预订。这些应该是灰色的，其他应该是红色的。

感谢您对此的帮助。

问候，

Answer 1

您首先需要一个方法来判断座位是否可用。

isReserved = (item) => {
 return this.state.reservedSeats.filter(seat => seat.Id ==item.Id).length > 0;
}

然后您可以像这样更改列表的外观

<FlatList
  style={styles.flatListArea1}
  contentContainerStyle={{ margin: 0 }}
  data={this.state.seats}
  numColumns={4}
  showsHorizontalScrollIndicator={false}
  renderItem={({ item, index }) => (
    <View style={[styles.containerIcons, { backgroundColor: isReserved(item) ? "#FAFAFA" : "white" }]} key={index}>
        <TouchableOpacity
            style={this.state.selectedItem === item ? styles.menuSelected : styles.menuTop}
            onPress={() => this.selectSeat(item)}
            disabled={isReserved(item)}
        >
            <View style={styles.buttons}>
                <Text
                    style={[styles.HallsText, { backgroundColor: isReserved(item) ? "#CCC" : "white" }]}
                    key={item.key}
                >
                    {item.Id}
                </Text>
            </View>
        </TouchableOpacity>
    </View>
)}
/>;

关注关键属性