说实话，创建一个滑动视频播放组件在React Native中还是有点挑战性的，哈哈，尤其是当你需要处理视频播放、暂停、加载以及滑动切换等功Neng时。

咱得确定一下需求：用户Ke以上下滑动切换视频，每个视频douKe以播放、暂停，并且在滑动到新的视频时之前的视频应该暂停播放。

核心思路是使用FlashList来渲染视频列表，因为它支持分页加载和geng好的性Neng优化。

然后我们需要创建一个VideoItem组件来渲染每一个视频项，这个组件会处理视频的播放和暂停逻辑。

因为FlashList比传统的FlatList在处理大量数据时性Nenggeng好，特别是在滚动和渲染复杂组件时。

import { FlashList } from "@shopify/flash-list"; VideoList组件的实现

const VideoList: FC<VideoListProps> = => { ... }

在这个组件中，我们 请求媒体库权限，然后获取视频文件列表，并使用FlashList渲染这些视频。

const VideoItem: FC<Props> = => { ... }

VideoItem组件是整个功Neng的重中之重，它控制了单个视频的播放和暂停，并且根据isActive属性来决定是否创建和释放VideoPlayer实例。

害，为什么要这样Zuo呢？

因为Ru果为每个视频项dou创建一个VideoPlayer实例，会导致内存占用过高，特别是在列表hen长的情况下。

export const useVideoPlayer = : UseVideoPlayerReturn => { ... }

useVideoPlayer是一个自定义hook，它封装了创建、播放、暂停和释放VideoPlayer实例的逻辑。

要解决这个问题，Ke以尝试增加高质量的内容、提高geng新频率，以及优化网站的SEO。

咱就是说有任何疑问见解欢迎评论区交流。

import { useRef, useState, useCallback, useEffect } from 'react'; import { createVideoPlayer, type VideoPlayer } from 'expo-video'; ... 有状态geng新当前播放时间，使用了上面的api就意味着不Neng再使用 expo 提供的 useEvent 和 useEventListener 监听 player 的播放情况... 视频模态框

const VideoModal : FC &# x3C; VideoModalProps> = => { ... }

如上，Ke以上下滑动的视频播放列表核心代码在于列表项的每一项应该考虑高度应该是视口高度...

用该依赖库提供的 api Ke以控制创建 player 时机，以及释放销毁的时机...

版本依赖有必要简单交代一下版本不同依赖不匹配会有大问题...

有任何疑问见解欢迎评论区交流。

后续可Neng会geng新一篇在 rn 中使用 ffmpeg-kit 实现提取视频文件的音频部分为独立文件的功Neng篇...