如何为 react-native-video 构建自定义搜索栏

Posted 2023-03-15

【中文标题】如何为 react-native-video 构建自定义搜索栏

【英文标题】：How can I build a custom seeking bar for react-native-video

【发布时间】：2019-11-29 09:58:00

【问题描述】：

我正在尝试为在 react-native-video 中播放的视频构建自定义搜索栏，你推荐我使用哪个库？

【参考方案1】：

我建议您尝试构建自己的，因为您有 onSeek 事件要收听并且方法 seek 更改位置。 如果您正在寻求有关 UI 的建议，我建议您查看 React Native Elements。您可以使用他们的滑块 (https://react-native-elements.github.io/react-native-elements/docs/slider.html) 并执行以下操作：

import  Slider  from 'react-native-elements';

<View style= flex: 1, alignItems: 'stretch', justifyContent: 'center' >
  <Slider
    value=this.state.progress // Which is updated by videoRef.onProgress listener
    onValueChange=value => videoRef.seek(value) 
  />
  <Text>Value: this.state.value</Text>
</View>;

【讨论】：

您能否给出一个更清晰或有效的示例来说明您所指的内容！

也许更简单的方法是github.com/itsnubix/react-native-video-controls。

它对我有用。我使用了这种方法。但由于滑块返回十进制值，我得到了错误。我使用Math.floor(value) 转换成整数来解决问题。