Soy nuevo en React nativo e implemento FlatList donde me enfrento a algunos problemas con datos dinámicos. Tengo una lista de asientos totales y asientos reservados.
this.state = { seats: props.route.params.seats, reservedSeats: props.route.params.Reserved, date: new Date() }A continuación se muestra la FlatList que he implementado.
<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>} />En el evento Click, puedo cambiar el color. Agradezco si alguien puede ayudar a comprender cómo podemos volver a representar FlatList en función de los datos dinámicos presentados en estado reservado. Por ejemplo. para hoy, de 5 asientos 3 están reservados. Esos deben ser grises y otros deben ser rojos.
Aprecio tu ayuda en esto.
Saludos,
En primer lugar, necesita un método que le indique si un asiento está disponible o no.
isReserved = (item) => { return this.state.reservedSeats.filter(seat => seat.Id ==item.Id).length > 0; }Luego cambias la apariencia de tu lista así
<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> )} />;Presta atención al atributo clave