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

【问题标题】：When a video had stopped, other video stopped simultaneously in react native video当一个视频停止时，其他视频在反应原生视频中同时停止
【发布时间】：2021-11-19 12:41:33
【问题描述】：

我已经开发了 react-native cli，react-native-video（目前正在尝试 expo-video）。

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

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

我该如何解决这个问题？

平面列表，


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} />
        )}

后容器

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>
  );
};

【问题讨论】：

首先显示代码，不知道您希望任何人如何帮助您提供您提供的信息
也提供您的代码，以便我们找出问题所在。
@Krismu 非常感谢！我已经编辑了我的文章以征求您的意见。
@GauravVanani 非常感谢！我已经编辑了我的文章以征求您的意见。

标签： reactjs react-native react-native-video

【解决方案1】：

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

【讨论】：

我已尝试在我的代码中应用您的答案。但是，我无法解决问题。通过写“const [playing, setPlaying] = React.useState(false);”在邮政集装箱。 "" if (videoPlayer && !videoPlayback) { setPlaying((prev) => true); videoPlayer?.current?.seek(0); }“”。还有 StyledVideo 组件，我已将“paused={!videoPlayback}”更改为“paused={!playing}”
在我看来，“if (videoPlayer && !videoPlayback)”这种情况是错误的。您对此有何看法？

【解决方案2】：

我解决了我的问题。我的逻辑没有错。重要的是“当前正在播放哪些视频？”

平面列表

  const _onViewableItemsChanged = useCallback(
    (props) => {
      const changed = props.changed;
      changed.forEach((item) => {
        if (item.item.vimeoId) {
          const tempId = item.item.vimeoId;

          if (item.isViewable) {
            if (readVideosVar.list.indexOf(tempId) === -1) {
              dispatch(postSlice.actions.addId(tempId));
            }
          } else {
            dispatch(postSlice.actions.deleteId(tempId));
          }
        }
      });
    },
    [dispatch],
  );

redux

    addId: (state, action) => {
      if (state.list.indexOf(action.payload) !== -1) {
        return;
      } else {
        let tempA = [];
        tempA.push(action.payload);
        state.list = state.list.concat(tempA);
      }
    },
    deleteId: (state, action) => {
      if (state.list.indexOf(action.payload) === -1) {
        return;
      } else {
        let stand = state.list;
        let findIdx = stand.indexOf(action.payload);
        let leftA = stand.slice(0, findIdx);
        let rightA = stand.slice(findIdx + 1);
        state.list = leftA.concat(rightA);
      }
    },

与现有代码相比，我添加了“redux-toolkit”。在调度逻辑中，“onViewalbeItems”已经实时跟踪了可查看的项目。

然后，我还添加了，

export const viewabilityConfig = {
  minimumViewTime: 1000,
  viewAreaCoveragePercentThreshold: 0,
};

这只是糖。

我是这样解决的！

【讨论】：