更改源时,React-Native-Video不更改视频

三林

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

此功能仅返回源视频。我确定element也会更改源,但不会重新渲染新视频。

有解决方案吗?

Jaydeep加拉尼

尽管这样做有效,但您做错了方法。

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

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对其进行递增。

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

React Native:更改ListView项目的样式

来自分类Dev

使用react-native单击时如何更改图像和文本颜色?

来自分类Dev

在React Native中按更改按钮样式

来自分类Dev

React Native:在ScrollView中更改焦点时键盘关闭

来自分类Dev

在React-native中使用图像背景更改页面时出现白色闪烁

来自分类Dev

react-native-datepicker更改输入格式

来自分类Dev

将keras模型转换为React-Native的tfjs时更改分片大小

来自分类Dev

专注于react-native-web(expo)时更改TextInput的边框颜色

来自分类Dev

我的应用每次刷新时,地图都会更改初始位置[react-native]

来自分类Dev

react-native-video仅播放视频的前几秒

来自分类Dev

React native-动态更改样式

来自分类Dev

react-native-af-video-player“糟糕!播放此视频时出错,请稍后再试”

来自分类Dev

React Native:从其他组件更改状态

来自分类Dev

按下时在react native中更改文本的背景颜色

来自分类Dev

在React Native中使用钩子更改文本

来自分类Dev

在React Native中单击时如何使每个按钮更改颜色?

来自分类Dev

按下TextInput组件中的按键时无法更改状态(React Native)

来自分类Dev

React Native-如何收听权限更改?

来自分类Dev

在React Native中更改父视图的道具

来自分类Dev

尝试在react-native-video中全屏显示时视频消失

来自分类Dev

react native 从 SQLite 动态更改 ListView

来自分类Dev

React Native 主动更改 StackNavigator 标题颜色

来自分类Dev

更改视频源 HTML

来自分类Dev

更改 React Native 日历的下拉图标

来自分类Dev

在 Grid react-native-easy-grid 中添加 onPress 功能时布局已更改

来自分类Dev

在 React Native 中更改选择器时显示不同的文本

来自分类Dev

更改视频 react-native-video 组件中的状态/道具

来自分类Dev

React Native 动态更改 drawerLabel

来自分类Dev

Realm db 更改目录 - React Native

Related 相关文章

  1. 1

    React Native:更改ListView项目的样式

  2. 2

    使用react-native单击时如何更改图像和文本颜色?

  3. 3

    在React Native中按更改按钮样式

  4. 4

    React Native:在ScrollView中更改焦点时键盘关闭

  5. 5

    在React-native中使用图像背景更改页面时出现白色闪烁

  6. 6

    react-native-datepicker更改输入格式

  7. 7

    将keras模型转换为React-Native的tfjs时更改分片大小

  8. 8

    专注于react-native-web(expo)时更改TextInput的边框颜色

  9. 9

    我的应用每次刷新时,地图都会更改初始位置[react-native]

  10. 10

    react-native-video仅播放视频的前几秒

  11. 11

    React native-动态更改样式

  12. 12

    react-native-af-video-player“糟糕!播放此视频时出错,请稍后再试”

  13. 13

    React Native:从其他组件更改状态

  14. 14

    按下时在react native中更改文本的背景颜色

  15. 15

    在React Native中使用钩子更改文本

  16. 16

    在React Native中单击时如何使每个按钮更改颜色?

  17. 17

    按下TextInput组件中的按键时无法更改状态(React Native)

  18. 18

    React Native-如何收听权限更改?

  19. 19

    在React Native中更改父视图的道具

  20. 20

    尝试在react-native-video中全屏显示时视频消失

  21. 21

    react native 从 SQLite 动态更改 ListView

  22. 22

    React Native 主动更改 StackNavigator 标题颜色

  23. 23

    更改视频源 HTML

  24. 24

    更改 React Native 日历的下拉图标

  25. 25

    在 Grid react-native-easy-grid 中添加 onPress 功能时布局已更改

  26. 26

    在 React Native 中更改选择器时显示不同的文本

  27. 27

    更改视频 react-native-video 组件中的状态/道具

  28. 28

    React Native 动态更改 drawerLabel

  29. 29

    Realm db 更改目录 - React Native

热门标签

归档