滑动时在 FlatList 水平暂停视频

Posted 2023-03-15

【中文标题】滑动时在 FlatList 水平暂停视频

【英文标题】：Pausing videos on FlatList horizontal when swiping

【发布时间】：2020-01-15 18:16:01

【问题描述】：

在使用 FlatList 滑动时，我可以控制台记录可查看的项目，但我想知道如何管理暂停视频。或者是否有更好的方法？

这是RenderItem函数组件

const RenderItem = (props) => 
  const [paused, setPaused] = useState(true);

  const togglePlay = () => setPaused(prev => !prev);

  return (
    <View>
      props.is_video ? (
        <>
          <Video
            paused=paused
            repeat
            source=uri: props.mediaUrl
          />
          <TouchableWithoutFeedback onPress=togglePlay>
            <View>
                paused ? <Icon
                size=180
                name="play"
                type="FontAwesome"
                style=opacity: 0.7, color: '#cccccc'
              /> : null
            </View>
          </TouchableWithoutFeedback>
        </>
      ) : (
        <Image source=uri: props.mediaUrl />
      )
    </View>
  );
;

然后在另一个函数中，我有这个：

const Post = (props) => 

  const onViewRef = useRef((viewableItems)=> console.log(viewableItems));
  const viewConfigRef = useRef( viewAreaCoveragePercentThreshold: 50 );

  return (
    <View style=flex: 1>
      <View>
        <FlatList
          onViewableItemsChanged=onViewRef.current
          viewabilityConfig=viewConfigRef.current
          data=props.navigation.state.params.media
          snapToAlignment='center'
          horizontal
          decelerationRate='fast'
          pagingEnabled
          renderItem=(item) => <RenderItem ...item />
          keyExtractor=item => item.mediaUrl
        />
      </View>
    </View>
  );
;

我可以按下视频，它会播放或暂停。当我现在滑动时，视频会继续播放。我希望能够确保在滑动时，播放的视频现在会暂停。

【参考方案1】：

您可以将暂停/播放状态提升到父组件 (Post)。由于任何时候最多应播放 1 个视频，因此状态可以简单地存储当前正在播放的项目 ID（或 mediaUrl，如果您使用它作为密钥/ID）。

在RenderItem:

<Video paused=props.paused ... />
<TouchableWithoutFeedback onPress=props.onTogglePlay>

在Post（匿名函数可以使用useCallback）：

const [activeVideo, setActiveVideo] = useState(null);
...
<FlatList onViewableItemsChanged=() => setActiveVideo(null) .../>
...
<RenderItem 
  paused=activeVideo !== item.mediaUrl 
  onTogglePlay=() =>
    setActiveVideo(item.mediaUrl === activeVideo ? null : item.mediaUrl)
  
  ...item
/>

您还可以将参考存储到活动视频并通过该参考暂停视频。

【讨论】：

抱歉耽搁了，这成功了！谢谢你给我看这个！