SectionList

Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Una interfaz performante para renderizar listas seccionadas, que incluye las funciones más útiles:

• Totalmente multiplataforma.

• Callbacks de visibilidad configurables.

• Soporte para cabecera de lista.

• Soporte para pie de lista.

• Soporte para separadores de elementos.

• Soporte para cabeceras de sección.

• Soporte para separadores de sección.

• Soporte para datos heterogéneos y renderizado de elementos.

• Pull to Refresh (arrastrar para actualizar).

• Carga al hacer scroll.

Si no necesitas soporte para secciones y prefieres una interfaz más simple, usa <FlatList>.

Ejemplo

Este componente es un wrapper conveniente alrededor de <VirtualizedList>, por lo que hereda sus props (y las de <ScrollView>) que no se listan explícitamente aquí, con las siguientes advertencias:

• El estado interno no se preserva cuando el contenido sale de la ventana de renderizado. Asegúrate de capturar todos los datos en los elementos o almacenes externos como Flux, Redux o Relay.

• Es un PureComponent, lo que significa que no se rerenderizará si los props permanecen superficialmente iguales. Asegúrate que todo lo que depende tu función renderItem se pase como prop (ej. extraData) que no sea === tras actualizaciones, o tu UI podría no actualizarse. Esto incluye la prop data y el estado del componente padre.

• Para optimizar memoria y permitir scroll fluido, el contenido se renderiza asíncronamente fuera de pantalla. Esto puede causar que al hacer scroll muy rápido aparezca contenido vacío momentáneamente. Es una compensación ajustable por aplicación, y estamos trabajando en mejoras internas.

• Por defecto, la lista busca una prop key en cada elemento para usarla como clave de React. Alternativamente, puedes proveer una prop personalizada keyExtractor.

---

Referencia

Props

Props de VirtualizedList

Hereda Props de VirtualizedList.

---

Required

renderItem

Renderizador predeterminado para cada elemento en cada sección. Puede sobrescribirse por sección. Debe retornar un elemento de React.

Type
function

La función de renderizado recibirá un objeto con estas claves:

• 'item' (object) - el objeto del elemento como se especifica en la clave data de esta sección

• 'index' (number) - Índice del elemento dentro de la sección.

• 'section' (object) - El objeto de sección completo como se especifica en sections.

• 'separators' (object) - Objeto con estas claves:

  • 'highlight' (function) - () => void
  • 'unhighlight' (function) - () => void
  • 'updateProps' (function) - (select, newProps) => void
    • 'select' (enum) - valores posibles: 'leading', 'trailing'
    • 'newProps' (object)

---

Required

sections

Los datos reales a renderizar, similar a la prop data en FlatList.

Type
array of Sections

---

extraData

Propiedad marcadora para indicar a la lista que vuelva a renderizar (dado que implementa PureComponent). Si tus funciones renderItem, Header, Footer, etc. dependen de algo externo a la prop data, inclúyelo aquí y trátalo como inmutable.

Type
any

---

initialNumToRender

Cantidad de elementos a renderizar en el lote inicial. Debe ser suficiente para llenar la pantalla pero no mucho más. Nota que estos elementos nunca se desmontarán como parte del renderizado por ventanas para mejorar el rendimiento percibido de acciones de scroll al inicio.

Type	Default
number	10

---

inverted

Invierte la dirección del scroll usando transformaciones de escala de -1.

Type	Default
boolean	false

---

ItemSeparatorComponent

Renderizado entre cada elemento, pero no al principio ni al final. Por defecto recibe props highlighted, section, y [leading/trailing][Item/Section]. renderItem provee separators.highlight/unhighlight que actualizan la prop highlighted, pero también puedes añadir props personalizadas con separators.updateProps. Puede ser un Componente de React (ej. SomeComponent) o un elemento React (ej. <SomeComponent />).

Type
component, function, element

---

keyExtractor

Usado para extraer una clave única para cada elemento en el índice especificado. La clave se usa para caché y como clave React para rastrear reordenamiento. El extractor predeterminado verifica item.key, luego item.id, y finalmente usa el índice como React. Nota: esto establece claves para cada elemento, pero cada sección necesita su propia clave global.

Type
(item: object, index: number) => string

---

ListEmptyComponent

Renderizado cuando la lista está vacía. Puede ser un Componente de React (ej. SomeComponent) o un elemento React (ej. <SomeComponent />).

Type
component, element

---

ListFooterComponent

Renderizado al final de la lista. Puede ser un Componente de React (ej. SomeComponent) o un elemento React (ej. <SomeComponent />).

Type
component, element

---

ListHeaderComponent

Renderizado al principio de la lista. Puede ser un Componente de React (ej. SomeComponent) o un elemento React (ej. <SomeComponent />).

Type
component, element

---

onRefresh

Si se provee, se añadirá un RefreshControl estándar para la funcionalidad "Pull to Refresh". Asegúrate de configurar correctamente la prop refreshing. Para desplazar el RefreshControl desde arriba (ej. 100 pts), usa progressViewOffset={100}.

Type
function

---

onViewableItemsChanged

Se llama cuando cambia la visibilidad de las filas, según lo definido por la prop viewabilityConfig.

Type
(callback: {changed: ViewToken[], viewableItems: ViewToken[]}) => void

---

refreshing

Establécelo en true mientras esperas nuevos datos durante una actualización.

Type	Default
boolean	false

---

removeClippedSubviews

Nota: puede tener errores (contenido faltante) en algunas circunstancias - úsalo bajo tu propio riesgo.

Esto puede mejorar el rendimiento del scroll en listas grandes.

Type	Default
boolean	false

---

renderSectionFooter

Renderizado al final de cada sección.

Type
(info: {section: Section}) => element ｜ null

---

renderSectionHeader

Renderizado al inicio de cada sección. Por defecto se pegan a la parte superior del ScrollView en iOS. Ver stickySectionHeadersEnabled.

Type
(info: {section: Section}) => element ｜ null

---

SectionSeparatorComponent

Se renderiza en la parte superior e inferior de cada sección (nota que esto es diferente de ItemSeparatorComponent, que solo se renderiza entre elementos). Están diseñados para separar secciones de los encabezados arriba y abajo, y típicamente tienen la misma respuesta de resaltado que ItemSeparatorComponent. También recibe highlighted, [leading/trailing][Item/Section], y cualquier prop personalizada de separators.updateProps.

Type
component, element

---

stickySectionHeadersEnabled

Hace que los encabezados de sección se queden fijos en la parte superior de la pantalla hasta que el siguiente lo desplace. Solo está activado por defecto en iOS porque ese es el estándar de la plataforma.

Type	Default
boolean	false Android true iOS

Métodos

flashScrollIndicators()

iOS

tsx

flashScrollIndicators();

Muestra momentáneamente los indicadores de desplazamiento.

---

recordInteraction()

tsx

recordInteraction();

Indica a la lista que ha ocurrido una interacción, lo que debe desencadenar cálculos de visibilidad, por ejemplo, si waitForInteractions es true y el usuario no ha desplazado. Normalmente se llama al tocar elementos o por acciones de navegación.

---

scrollToLocation()

tsx

scrollToLocation(params: SectionListScrollParams);

Desplaza al elemento en el sectionIndex e itemIndex especificados (dentro de la sección) posicionado en el área visible, donde viewPosition 0 lo coloca en la parte superior (y puede estar cubierto por un encabezado fijo), 1 en la parte inferior, y 0.5 centrado en el medio.

Nota: No se puede desplazar a ubicaciones fuera de la ventana de renderizado sin especificar la prop getItemLayout o onScrollToIndexFailed.

Parámetros:

Name	Type
params Required	object

Las claves válidas para params son:

• 'animated' (boolean) - Si la lista debe realizar una animación al desplazarse. Por defecto true.

• 'itemIndex' (number) - Índice dentro de la sección del elemento al que desplazarse. Requerido.

• 'sectionIndex' (number) - Índice de la sección que contiene el elemento al que desplazarse. Requerido.

• 'viewOffset' (number) - Número fijo de píxeles para compensar la posición objetivo final, ej. para contrarrestar encabezados fijos.

• 'viewPosition' (number) - Valor 0 coloca el elemento en la parte superior, 1 en la inferior y 0.5 centrado.

Definiciones de tipos

Sección

Objeto que identifica los datos a renderizar para una sección dada.

Type
any

Propiedades:

Name	Type	Description
data Required	array	The data for rendering items in this section. Array of objects, much like FlatList's data prop.
key	string	Optional key to keep track of section re-ordering. If you don't plan on re-ordering sections, the array index will be used by default.
renderItem	function	Optionally define an arbitrary item renderer for this section, overriding the default renderItem for the list.
ItemSeparatorComponent	component, element	Optionally define an arbitrary item separator for this section, overriding the default ItemSeparatorComponent for the list.
keyExtractor	function	Optionally define an arbitrary key extractor for this section, overriding the default keyExtractor.