0
139
ViewsAgregue un separador cada 3 elementos en la lista plana - React Native
¿Cómo puedo agregar un separador para cada 3 elementos en la lista plana? Solo puedo agregar un separador después de cada elemento 1. No encontré un accesorio para eso. Aquí están mis códigos:
import React from 'react'; import { SafeAreaView, View, FlatList, StyleSheet, Text} from 'react-native'; const DATA = [ { id: 1, title: 'Item 1', }, { id: 2, title: 'Item 2', }, { id: 3, title: 'Item 3', }, { id: 4, title: ' Item 4', }, { id: 5, title: 'Item 5', }, { id: 6, title: 'Item 6', }, { id: 7, title: 'Item 7', }, ]; const App = () => { const renderItem = ({ item }) => ( <View style={styles.item}> <Text style={styles.title}>{item.title}</Text> </View> ); const seperator = () => { return ( <View style={styles.seperator} /> ) } return ( <SafeAreaView style={styles.container}> <FlatList data={DATA} renderItem={renderItem} keyExtractor={(items) => items.id} ItemSeparatorComponent={seperator} /> </SafeAreaView> ); } const styles = StyleSheet.create({ container: { flex: 1, }, item: { backgroundColor: '#f9c2ff', padding: 10, marginVertical: 8, marginHorizontal: 16, }, title: { fontSize: 32, }, seperator: { width: 300, height: 10, backgroundColor: 'red' } }); export default App;Mi aplicación se parece a:
Pero quiero hacer eso:
¿Cómo puedo agregar un separador para cada 3 elementos en la lista plana? Solo puedo agregar un separador después de cada elemento 1. No encontré un accesorio para eso.
2 answers
Answer question0
En caso de que sus elementos de datos no tengan una identificación o una propiedad que pueda distinguir fácilmente dos elementos, considere usar un contador para realizar un seguimiento de cuántas veces se llamó a su función de separator .
Sin embargo, es importante trabajar con alguna clave en keyExtractor , ya que se utiliza para el almacenamiento en caché y como clave de reacción para rastrear la reordenación de elementos.
Para este caso, de todos modos, se puede usar el gancho useRef , ya que:
useRef devuelve un objeto ref mutable cuya propiedad .current se inicializa en el argumento pasado
Tenga en cuenta que aún sería factible si ha elegido useState hook en su lugar, pero probablemente más detallado.
import { useRef } from 'react' let count = useRef(0) const seperator = (e) => { count.current += 1 return ( (count.current % 3 == 0) ? <View style={styles.seperator}/> : null ) } return ( <SafeAreaView style={styles.container}> <FlatList data={DATA} renderItem={renderItem} ItemSeparatorComponent={(e) => seperator(e)} /> </SafeAreaView> )Como es mutable, agregue una unidad cada vez que se llame a la función
0
Primero, pase una función de flecha que reciba un argumento. En este caso, es e , que contiene el objeto (por ejemplo, el primero):
{"highlighted":false,"leadingItem":{"id":1,"title":"Item 1"}}
Entonces es un enfoque fácil, obtenga la identificación y verifique si es %3 === 0 . Echar un vistazo:
const seperator = (e) => { return ( (e.leadingItem.id % 3 == 0) ? <View style={styles.seperator}/> : null ) }Y entonces
return ( <SafeAreaView style={styles.container}> <FlatList data={DATA} renderItem={renderItem} keyExtractor={(items) => items.id} ItemSeparatorComponent={(e) => seperator(e)} /> </SafeAreaView> );Como se puede ver en este ejemplo de trabajo