水平滑动时暂停平面列表上的视频

Question

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

？这是呈现项函数组件

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

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

Answer 1

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

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

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