如何在React Native中用一个按钮控制两个react-native-video的播放/暂停？

核心思路 #

通过单个状态变量统一管理播放状态，为两个视频组件分别创建实例引用，点击按钮时切换状态并同步调用两个视频的播放/暂停方法。

实现步骤 #

1. 初始化状态与视频引用
   用useState维护播放状态，useRef获取两个视频组件的实例：

   import React, { useState, useRef } from 'react';
   import { View, TouchableOpacity, Text } from 'react-native';
   import Video from 'react-native-video';
   
   const DualVideoPlayer = () => {
     const [isPlaying, setIsPlaying] = useState(false);
     const video1Ref = useRef(null);
     const video2Ref = useRef(null);
   

2. 编写同步控制逻辑
   实现按钮点击切换函数，同步操作两个视频：

   const togglePlayPause = () => {
       const newState = !isPlaying;
       setIsPlaying(newState);
   
       // 操作第一个视频
       video1Ref.current && (newState ? video1Ref.current.play() : video1Ref.current.pause());
       // 操作第二个视频
       video2Ref.current && (newState ? video2Ref.current.play() : video2Ref.current.pause());
     };
   

3. 渲染组件
   渲染两个视频和控制按钮，为视频绑定引用：

   return (
       <View style={{ flex: 1, padding: 20 }}>
         <Video
           ref={video1Ref}
           source={{ uri: '你的第一个视频地址' }}
           style={{ width: '100%', height: 200, marginBottom: 20 }}
           resizeMode="contain"
         />
         <Video
           ref={video2Ref}
           source={{ uri: '你的第二个视频地址' }}
           style={{ width: '100%', height: 200, marginBottom: 20 }}
           resizeMode="contain"
         />
         <TouchableOpacity
           onPress={togglePlayPause}
           style={{
             backgroundColor: '#2196F3',
             padding: 15,
             borderRadius: 8,
             alignItems: 'center'
           }}
         >
           <Text style={{ color: 'white', fontSize: 16 }}>
             {isPlaying ? '暂停' : '播放'}
           </Text>
         </TouchableOpacity>
       </View>
     );
   };
   
   export default DualVideoPlayer;
   

注意事项 #

• 确保react-native-video已完成平台配置（iOS需在info.plist添加视频权限，Android需在AndroidManifest.xml配置相关权限）
• 若视频加载延迟，可通过onLoad回调标记视频就绪状态，避免调用播放/暂停方法时出现空引用错误
• 如需同步视频进度，可监听其中一个视频的onProgress事件，调用另一个视频的seek方法实现同步

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