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

Question

我使用 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

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

有没有办法解决它？

Answer 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"
/>;

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