视频同时播放 - React Native答案

【问题标题】：Videos play at the same time - React Native视频同时播放 - React Native
【发布时间】：2022-12-15 19:30:46
【问题描述】：

我有两个来自https://www.npmjs.com/package/react-native-video的视频我没有激活控件，我的目的是通过按下按钮来激活和停用视频。我用状态来做，我的问题是当我按下按钮暂停或播放视频时，所有的视频都会播放，而不仅仅是一个。

我有一个 JSON 格式的视频列表，并遍历所有这些视频。

这是我的代码的 sn-p：

const [paused, setPaused] = useState(false);

const playVideo = () => {
    setPaused(!paused);
}

{videos.map((video) => (
    <Video
        source={{ uri: video.video }}
        rate={1.0}
        volume={1.0}
        resizeMode="cover"
        style={styles.video}
        paused={paused}
        onEnd={() => setPaused(true)}
    />
    {paused && (
        <View style={styles.videoPause}>
            <Text style={styles.title}>{video.titulo}</Text>
            <Text style={styles.description}>{video.descripcion}</Text>
            <TouchableOpacity style={styles.playButton} onPress={() => playVideo()}>
                <CustomIcon name="play" size={90} color={'#fff'} />
            </TouchableOpacity>
        </View>
    )}

))}

【问题讨论】：

标签： react-native react-native-video

【解决方案1】：

问题出在你的状态上，你应该制作一个组件来包装视频并在那里管理播放/暂停状态。这样您就可以单独控制每个视频。

【讨论】：

我可以看一个例子吗？我不是 100% 清楚你的意思。
我会尽快提供一个例子??

【解决方案2】：

首先创建一个具有独立状态而不是全局的组件，就像你在这里拥有的那样。

例子:

export default function VideoPlayer(props) {
  const { styles, video } = props
  const [paused, setPaused] = useState(false)

  const playVideo = () => {
    setPaused(!paused)
  }

 return (
  <View>
    <Video
    paused={paused}
    rate={1.0}
    resizeMode="cover"
    source={{ uri: video.video }}
    style={styles.video}
    volume={1.0}
    onEnd={() => setPaused(true)}
  />

  {
    paused && (
      <View style={styles.videoPause}>
        <Text style={styles.title}>{video.titulo}</Text>
        <Text style={styles.description}>{video.descripcion}</Text>
        <TouchableOpacity style={styles.playButton} onPress={() => playVideo()}>
          <CustomIcon color="#fff" name="play" size={90} />
        </TouchableOpacity>
      </View>
    )
  }
}

)

然后像这样在您的页面中呈现它：

{videos.map((video) => <VideoPlayer styles={...YOUR_STYLES} video={video}/>}

如果你愿意，你也可以在组件内部声明样式，但这样你就不需要将它们作为 props 传递。

【讨论】：