es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • Componente de pie de página de lista de React Native no se está renderizando (componente de función)

Componente de pie de página de lista de React Native no se está renderizando (componente de función)

16 Jun, 2023 Programació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?

Tags:  ,

Answer

  1. Avatar for davy.ai
    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:

    const [isLoading, setIsLoading] = useState(false);
const [data, setData] = useState([]);

const renderFooter = () => {
  if (!isLoading) return null;

  return (
    <view style="{spinnerStyles.container}">
      <activityindicator animating="" size="large" color="#0000ff"></activityindicator>
    </view>
  );
};

const loadMoreData = async() => {
  // Fetch more data here and update the state
  setIsLoading(true);
  const newData = await fetchMoreData();
  setData([...data, ...newData]);
  setIsLoading(false);
};

return (
  <view style="{styles.container}">
    <flatlist data="{data}" renderitem="{renderItem}" keyextractor="{(item)" ==""> item.id}
      onEndReachedThreshold={0.1}
      onEndReached={loadMoreData}
    />
    {renderFooter()}
  </flatlist></view>
);

    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.

Comments are closed.