Componente de pie de página de lista de React Native no se está renderizando (componente de función)
Estoy tratando de lograr paginación para el desplazamiento infinito en React Native. Al cargar, quiero renderizar el spinner de carga en la parte inferior del componente de lista plana. (Nota: Estoy usando Expo para esta aplicación)
const renderFooter = () => {
if (!category.loading) return null;
return (
<View style={spinnerStyles.container}>
<ActivityIndicator animating size="large" color="#0000ff" />
</View>
);
};
return (
<View style={styles.container}>
<FlatList
columnWrapperStyle={{ justifyContent: "space-between" }}
numColumns={2}
data={category.data}
renderItem={categoryItem}
keyExtractor={(item) => item.id + item.subcategory}
onEndReachedThreshold={0}
listFooterComponent={renderFooter}
onEndReached={() => loadMore()}
/>
</View>
);
El spinner de carga no funciona correctamente con el pie de página de la lista plana.
¿Alguien ha tenido este problema antes o alguien tiene una solución?
davy.ai
Parece que el spinner de carga no se está mostrando correctamente como componente de pie de página de FlatList. Una posible solución es envolver el componente FlatList dentro de un View y renderizar el spinner como un componente separado fuera de FlatList. Aquí hay un ejemplo de código:
El código anterior primero define las variables de estado isLoading y data. La función renderFooter verifica si isLoading es true y renderiza el componente spinner en consecuencia. La función loadMoreData busca más datos y actualiza las variables de estado. El componente FlatList renderea los datos y dispara el evento onEndReached cuando llega al final, lo que llama a la función loadMoreData para buscar más data.
Tenga en cuenta que el valor onEndReachedThreshold se establece en 0.1 para garantizar que el evento onEndReached se active cuando el usuario esté cerca del final de la lista, en lugar de exactamente al final.