reactjs - React Native:如何在 FlatList 中播放视频
问题描述
我在这段代码中已经有一段时间了,试图将我的视频从本地目录列出到我的 react native 应用程序中。当我开始这个项目时,我作为新手在这方面问了几个问题,但没有得到任何答案。不知何故,我设法达到了这一点。我已经能够从我的本地目录中获取我的视频,但现在的问题是我的视频只显示灰色缩略图,当我点击任何视频时,它会给出一个 ReferenceError:找不到变量:视频
下面是我的截图和我的代码。请我需要纠正对此代码所做的错误操作。在此先感谢您的帮助。
constructor(Props) {
super(Props);
this.state = {
videos: [],
playing: false,
screenType: 'content',
resizeMode: 'contain',
currentTime: 0,
videoPlayer: null,
duration: 0,
isFullScreen: false,
isLoading: true,
paused: false,
playerState: PLAYER_STATES.PLAYING,
};
这是我的构造函数
componentDidMount() {
var filePath = RNFetchBlob.fs.dirs.MovieDir + '/Voc Vedos/';
RNFetchBlob.fs.ls(filePath)
.then(files => {
this.setState({videos:files});
console.warn(files);
}).catch(err=>alert(err.toString()))
}
这是我从设备上的本地目录中获取视频的地方
render() {
const { duration, currentTime, paused, overlay } = this.state
return(
<View style={styles.container}>
<FlatList
data={this.state.videos}
keyExtractor={item=>item}
ItemSeparatorComponent={() => { return (<View style={styles.separator} />) }}
// viewabilityConfig={this.viewabilityConfig}
// onViewableItemsChanged={this.onViewableItemsChanged}
// viewabilityConfig={{
// itemVisiblePercentThreshold: 95
// }}
numColumns={3}
renderItem={({ item, index, separators }) => (
<TouchableOpacity
onPress={() => this._onPress(item)}
style={{width:100,height:100}}>
<View
style={{width:100,height:100, margin:8}}
>
<Video
source ={{uri: '/storage/emulated/0/Movies/Voc Vedos/'+{item}}}
ref={(ref: Video) => { this.video = ref }}
style={{width:100,height:100}}
rate={this.state.rate}
paused={this.state.paused}
volume={this.state.volume}
muted={this.state.muted}
resizeMode={this.state.resizeMode}
onLoad={this.onLoad}
onProgress={this.onProgress}
onEnd={this.onEnd}
onAudioBecomingNoisy={this.onAudioBecomingNoisy}
onAudioFocusChanged={this.onAudioFocusChanged}
/>
<MediaControls
isFullScreen={this.state.isFullScreen}
duration={duration}
isLoading={this.state.isLoading}
mainColor="purple"
onFullScreen={noop}
onPaused={this.state.onPaused}
onReplay={this.state.onReplay}
onSeek={this.state.onSeek}
onSeeking={this.state.onSeeking}
playerState={this.state.playerState}
progress={currentTime}
/>
</View>
</TouchableOpacity>
)}
/>
</View>
这是我的渲染代码。请问我需要有关如何正确显示我的视频并在点击时播放视频的帮助
解决方案
根据 react-native-video 文档:对于设备存储中的文件源,必须写 'file://' 开头的路径
例子:
source={{ uri: 'file:///sdcard/Movies/sintel.mp4' }}
阅读文档https://github.com/react-native-community/react-native-video#source
推荐阅读
- javascript - 图像对象错误事件未在 404 上触发
- javascript - 我可以安全地在 JavaScript 中的 Event 对象上设置自定义属性吗?
- java - 如何获得下一个浮点值(向上或向下)?
- ruby - Savon 数组/哈希混淆
- python-2.7 - 以下python执行语句对我来说没有意义,有人可以解释一下吗?
- assembly - 如何用汇编语言读取命令行参数?
- r - 如何构建循环以查找有关数据框中列的某些值的模式
- android - 在 Android 中每分钟运行一个后台任务
- fortran - 在同一个 ASSOCIATE 构造中引用另一个关联实体中的关联名称
- vhdl - 多进程的信号控制