更改源时，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

此功能只是return源视频。我确定元素也会更改源但不会重新渲染新视频。

有什么办法可以解决吗？

Answer 1

虽然它有效，但你做错了。

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

source={{uri: _getVideo().video_url}}

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

因此您的 _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 递增它。

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

React-native-video not change video when change source

controls

react-native

react-native-video