在 React Native 中更改视频源

Posted 2023-03-15

【中文标题】在 React Native 中更改视频源

【英文标题】：Change videosource in React Native

【发布时间】：2019-08-27 17:37:53

【问题描述】：

我在我的 react-native 应用程序中使用 react-native-video。我希望能够动态更改视频源，但发现它并不容易。我的方法是简单地通过使用钩子更改剪辑名称，将 video1 更改为 video2。但我无法更新视频实例：

我确实尝试过这样的事情：

const [clipSelected, setClipSelected] = useState('video1');

const onButton = (name) => 
  console.log("videoname", name)
  setClipSelected(name);


return (
  <Fragment>
    <View style=styles.container>
        <Video
          source=require('./' + clipSelected + '.mp4')
          ref=(ref) => 
            bgVideo = ref
          
          onBuffer=this.onBuffer
          onError=this.videoError
          rate=1
          repeat=true
        />

       <Button onPress=(e) => onButton('video2')></Button>
    </View>
  </Fragment >
);

是否有任何其他人知道我可以在哪里解决这个问题的库、方法或方法？基本上是一种更新视频源实例的方法。我要在 android TV 上运行它......

【问题讨论】：

video1 工作了吗？

不，它说“TransformerError App.js: App.js Invalid call at line 111: require(''./' + clipSelected + '.mp4') 类似的东西。

基本上我认为我需要做的是重置视频实例并加载一个新文件......但不知道该怎么做......

我觉得你不需要require，直接放你的文件路径。

【参考方案1】：

使用状态值进行更改。

const [clipSelected, setClipSelected] = useState(false);

const onButton = () => 
  setClipSelected(true);

...
        <Video
          source=clipSelected === false ? require('./video1.mp4') : require('./video2.mp4')
...
<Button onPress=(e) => onButton()></Button>