React Native FlatList:使用动态数据呈现条件样式

Question

我是React本机和实现FlatList的新手，在那里我面临着一些动态数据问题。我有一份总座位和预定座位的清单。

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

以下是我实施的平面列表

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

注意关键属性