React Native中用react-native-video-player实现FlatList单视频播放问题

你当前的问题根源是用全局布尔状态控制所有视频，所有VideoPlayer组件绑定同一个isPlay值，导致点击时所有视频同步播放/暂停。要实现单个视频独立播放，需要用「跟踪当前播放视频的唯一标识」替代全局布尔状态。

修改步骤 #

1. 替换状态变量：将原有的布尔状态isPlay改为存储当前播放视频的唯一标识（比如数据中的item.id，无ID可使用item.name）
2. 更新播放控制逻辑：每个视频组件根据自身标识与状态值对比，决定是否播放
3. 调整回调函数：点击播放/暂停时，设置或清空当前播放的视频标识

修改后的完整代码片段 #

// 替换原有的[isPlay, setPlay]状态，改用唯一标识跟踪播放中的视频
const [playingVideoKey, setPlayingVideoKey] = React.useState(null);

// 单个视频项的渲染函数
const renderItemOtherInnovations = ({ item }) => (
  <VideoPlayer
    endWithThumbnail={true}
    fullScreenOnLongPress={true}
    // 核心逻辑：仅当当前视频标识与状态值匹配时才播放，否则暂停
    paused={playingVideoKey !== item.name} // 这里用item.name作为唯一标识，可替换为item.id等字段
    onPlayPress={() => setPlayingVideoKey(item.name)} // 点击播放时记录当前视频的标识
    onPausePress={() => setPlayingVideoKey(null)} // 点击暂停时清空标识
    autoplay={false}
    resizeMode="contain"
    video={{uri: props.filePath + item.name.replace(/ /g, '%20')}}
    style={styles.backgroundVideo}
    disableControlsAutoHide={true}
    thumbnail={{uri: props.filePath + item.thumbnail}}
  />
);

// FlatList部分保持原有配置
<FlatList
  data={props.inactiveLandings}
  horizontal
  showsHorizontalScrollIndicator={false}
  renderItem={renderItemOtherInnovations}
/>

逻辑说明 #

• 每个视频组件会自行判断：自身标识是否与playingVideoKey一致，一致则播放，否则自动暂停
• 点击某视频的播放按钮时，将其标识存入状态，其他视频会因不匹配状态自动暂停
• 点击暂停按钮时清空状态，当前视频停止播放

注意事项 #

• 确保使用的标识（如item.name）在数据集中是唯一的，否则会出现多个视频同步播放的问题
• 如果数据中有id字段，优先使用item.id作为标识，比名称更可靠

内容的提问来源于stack exchange，提问作者Mac