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.

Cómo renderizar videos en un FlatList

Estoy tratando de renderizar videos en una flatList, sin embargo creo que los videos se recargan cuando desplazo la FlatList. ¿Podría ser que la flatList interfiera con el sistema de carga de react-native-video?

Aquí está el componente de video:

const Video = (props) => {
    const { item, paused, index } = props;
    const videoRef = useRef(null);

    return (
        <video ref="{videoRef}" style="{styles.video}" paused="{paused}" resizemode="cover" source="{{" uri:="" item.videourl="" }}="" repeat="" onload="{()" ==""> {
                console.log('Video: ', index, '| Cargando');
            }}
            onReadyForDisplay={() => {
                console.log('Video: ', index, '| Listo');
            }}
            onError={(err) => {
                console.warn('err', err);
            }}
        />
    );
};

const VideoMemoizado = React.memo(Video);

export default VideoMemoizado;

He intentado usar Memo para hacer que la flatList sea más eficiente, pero no parece ayudar. Debo mencionar que no usar memo no soluciona el problema.

Aquí está la FlatList:

const onViewableItemsChanged = useCallback(({ viewableItems }) => {
    if (viewableItems.length > 0) {
        setActiveIndex(viewableItems[0].index);
    }
}, []);

return (
    <view style="{styles.container}">
        <flatlist data="{videos}" pagingenabled="{true}" keyextractor="{(item)" ==""> item.id}
            removeClippedSubviews={true}
            initialNumToRender={3}
            maxToRenderPerBatch={3}
            windowSize={5}
            viewabilityConfig={{ viewAreaCoveragePercentThreshold: 100 }}
            onViewableItemsChanged={onViewableItemsChanged}
            renderItem={({ item, index }) => {
                return (
                    <post item="{item}" index="{index}" paused="{index" !="=" activeindex="" ||="" tabindex="" !="=" 0}="" isactive="{index">= activeIndex + 1 && index <= activeIndex - 1}
                    />
                );
            }}
        />
    </post></flatlist></view>
);

Los registros se ven algo así (para un desplazamiento de [1] a [2]):

LOG Video: 4 | Cargando
LOG Video: 4 | Listo
LOG Video: 0 | Cargando
LOG Video: 0 | Listo
LOG Video: 2 | Cargando
LOG Video: 4 | Cargando
LOG Video: 3 | Cargando
LOG Video: 2 | Listo
LOG Video: 1 | Cargando
LOG Video: 1 | Listo
LOG Video: 4 | Listo
LOG Video: 3 | Listo

¿Por qué se vuelven a cargar todos?

Información adicional: cuando me desplazo, el siguiente video comienza a reproducirse antes de recargarse.

Tags:  , ,

Answer

  1. Avatar for davy.ai

    Parece que los videos se están recargando cuando se desplazan fuera de la vista y luego vuelven a aparecer en la vista. Esto podría estar sucediendo porque FlatList está desmontando y volviendo a montar los componentes de video a medida que salen y vuelven a entrar en la vista.

    Una posible solución a este problema es establecer la propiedad “removeClippedSubviews” de FlatList en “false”. Por defecto, FlatList desmontará los elementos visibles que están fuera de la ventana de renderizado, pero al establecer “removeClippedSubviews” en “false”, se evitará este comportamiento y se mantendrán todos los elementos montados incluso si están fuera del área visible.

    Otra posible solución es implementar un mecanismo de almacenamiento en caché para los componentes de video para evitar recargas innecesarias. Una forma de hacer esto es utilizando una biblioteca de terceros como “react-native-video-cache”, que proporciona una solución sencilla de almacenamiento en caché para videos. Alternativamente, podrías implementar tu propio mecanismo de almacenamiento en caché almacenando los datos del video en estado o utilizando una biblioteca de almacenamiento en caché como “react-native-cache-store”.

    Por último, vale la pena mencionar que el evento “onReadyForDisplay” se activa cuando el video se carga y puede mostrarse, por lo que puede ser beneficioso esperar a este evento antes de renderizar el componente de video. Esto podría ayudar a evitar recargas innecesarias y mejorar el rendimiento general de FlatList.

Comments are closed.