React Native FlatList：使用动态数据渲染条件样式

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

注意关键属性

React Native FlatList：使用动态数据渲染条件样式

React Native FlatList: render conditional style with dynamic data

javascript

reactjs

react-native

react-native-flatlist