更改源时 React-native-video 不更改视频

Posted 2023-03-15

【中文标题】更改源时 React-native-video 不更改视频

【英文标题】：React-native-video not change video when change source

【发布时间】：2020-03-03 04:56:55

【问题描述】：

我使用 react-native-video 为我的应用渲染视频播放器。

我尝试更改视频的来源。这是我运行良好的代码。

<Video
  source=uri: _getVideo().video_url
  style=Styles.backgroundVideo
  autoplay=true
  controls=false
  disableFocus=true
  resizeMode="cover"
/>;

但我更改了“controls=true”。它不渲染新视频，只渲染音频。并且仍然显示旧视频。

_getVideo().video_url

这个函数只是返回源视频。我确定元素也会更改源但不会重新渲染新视频。

有解决办法吗？

【参考方案1】：

你做错了，虽然它有效。

但是让我告诉你这里发生了什么，

source=uri: _getVideo().video_url

每次执行render方法时都会执行此行，在setState、props变化等事件后调用render方法。

因此您的_getVideo() 方法将被调用任意次数，尽管它不是必需的。

因此我建议您为 URL 初始化一个状态变量。在你想要的地方调用你的 _getVideo() 。可能在 componentDidMount 上首次运行，然后单击按钮或其他任何您想要的，但使用 _getVideo 方法中的 setState 将此 URL 设置为该状态。

所以想要的东西会是这样，

<Video
  key=this.state.videoComponentKey
  source=uri: this.state.video_url
  style=Styles.backgroundVideo
  autoplay=true
  controls=false
  disableFocus=true
  resizeMode="cover"
/>;

现在，如果您注意到我又添加了一个道具key，这将解决您的旧视频问题。每当更改 URL 时，都会更改密钥中的某些内容。所以我采取了一种状态并将其传递给这个道具。现在你可以用 0 初始化它，下次只需使用 setState 递增它。

【讨论】：

正常工作必须有唯一键（“videoComponentKey”）。