Uso de listas
Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →
React Native ofrece un conjunto de componentes para presentar listas de datos. Por lo general, querrás usar FlatList o SectionList.
El componente FlatList muestra una lista desplazable de datos cambiantes pero de estructura similar. FlatList funciona bien con listas largas de datos, donde el número de elementos puede cambiar con el tiempo. A diferencia del ScrollView, que es más genérico, FlatList solo renderiza los elementos que se muestran actualmente en la pantalla, no todos a la vez.
El componente FlatList requiere dos props: data y renderItem. data es la fuente de información para la lista. renderItem toma un elemento de la fuente y devuelve un componente formateado para renderizar.
Este ejemplo crea un FlatList básico con datos codificados directamente. Cada elemento en las props data se renderiza como un componente Text. Luego, el componente FlatListBasics renderiza el FlatList y todos los componentes Text.
Si quieres renderizar un conjunto de datos dividido en secciones lógicas, tal vez con encabezados de sección, similar a las UITableView de iOS, entonces SectionList es la opción adecuada.
Uno de los usos más comunes de una lista es mostrar datos que obtienes de un servidor. Para hacer eso, necesitarás aprender sobre redes en React Native.