Question

我有一个滚动视图，它有一个子级的视频组件数组。它在用户界面上显示视频轮播。我希望用户能够单击视频上方的播放按钮并播放该视频，但按照我的逻辑设置方式，所有视频都一起播放，因为播放视频的条件存在于 react useState 中。< /p>

查看代码：

@pandas_udf("string", PandasUDFType.SCALAR)
def seq_sum(col1):
  
  # actual function/calculation goes here
  def main(x):
    if x < 6:
      v = "low"
    else:
      v = "high"
    return(v)
  
  # now apply map function, returning a panda series
  result = pd.Series(map(main,col1))
   
  return (result)

df.select("*",seq_sum('column_name').alias('new_col')).show(10)

我希望用户点击一个按钮并播放一个视频，使用轮播转到下一个视频，点击播放并播放下一个视频。

请帮忙。

Answer 1

如果您将播放状态从 Boolean 更改为 Number，您可能会解决您的问题。方法如下：

    const [videoBeingDisplayedIndex, setVideoBeingDisplayedIndex] = React.useState(5);
    const [play, setPlay] = React.useState(5); // If it is equals to the video id the video should play, else it should not
...
    <Button onClick={() => setPlay(videoBeingDisplayedIndex)}>
        Play Video
    </Button>
    <VideoCarousel>
        {
            myVideoList.map((video, index) => {
                return (
                   <Video 
                       content={video} 
                       index={index} 
                       play={play === index} // Check if the current play state is equals to the video unique id
                   />
                );
            })
        }
    </VideoCarousel>
...

PS。请记住，此代码段是对 react-native 元素进行抽象并专注于问题。

如何在 React 原生 ScrollView 轮播上播放特定视频？

1 个答案: