时间戳

首页 > 解决方案 > 当一个视频停止时，其他视频在反应原生视频中同时停止

reactjs - 当一个视频停止时，其他视频在反应原生视频中同时停止

问题描述

我已经开发了 react-native cli，react-native-video（目前，试图展示视频）。

在一个屏幕中，有一个flatList，它有一个renderItem(column2)。在 renderItem 中呈现图像或视频缩略图。就像购物应用程序 UI AMAZON。

问题是视频。用户向下滑动到手机视图时，它将自动停止。同时，在停止的视频下方，其他视频播放器将停止。该视频正好在用户手机视图的中间！

我该如何解决这个问题？

  1. 平面列表，

const [videoPlayback, setVideoPlayback] = useState(false);
 const viewabilityConfig = {
    itemVisiblePercentThreshold: 80,
  };

  const _onViewableItemsChanged = useCallback((props) => {
    const changed = props.changed;
    changed.forEach((item) => {
      if (item.item.vimeoId) {
        if (item.isViewable) {
          setVideoPlayback((prev) => true);
        } else {
          setVideoPlayback((prev) => false);
        }
      }
    });
  }, []);
...
      <FlatList
        ref={ref}
        numColumns={2}
        data={posts}
        keyExtractor={(item: any) => `${item.postId}`}
        viewabilityConfig={viewabilityConfig}
        onViewableItemsChanged={_onViewableItemsChanged}
        renderItem={({ item, index }) => (
          <PostContainer item={item} videoPlayback={videoPlayback} navigation={navigation} index={index} />
        )}
  1. 邮政容器
const PostContainer = ({ item, videoPlayback }) => {
  const videoPlayer = useRef(null);

  useFocusEffect(
    React.useCallback(() => {
      videoPlayer?.current?.seek(0);

      if (videoPlayer && !videoPlayback) {
        videoPlayer?.current?.seek(0);
      }
    }, [fadeAnim, videoPlayback]),
  );

  return (
    <View>

      { // This place that image component rendered}

      {item.vimeoId && (
        <StyledVideo
          ref={videoPlayer}
          paused={!videoPlayback}
          repeat={true}
          resizeMode={"cover"}
          volume={0}
          source={{
            uri: item.vimeoThumbnail,
          }}
        />
      )}
    </View>
  );
};

标签： reactjsreact-nativereact-native-video

解决方案

您列表中的所有视频共享相同的 videoPlayback 状态。如果您希望单独控制每个视频，请将您的 videoPlayback 状态逻辑移动到您的 PostContainer。

推荐阅读