React Native:如何在FlatList中播放视频

本杰明·伊克瓦格武

我已经在这段代码中使用了一段时间,试图将我的视频从本地目录列出到我的React Native应用程序中。在我开始项目时,我曾在这方面作为新手问过几个问题,但没有得到任何答案。我以某种方式设法达到了这一点。我已经能够从本地目录中获取视频,但是现在的问题是我的视频仅显示灰色缩略图,而当我点击任何视频时,它会出现ReferenceError:找不到变量:videos

以下是我的屏幕截图和代码。请我纠正在此代码上做的错误的事情。在此先感谢您的帮助。我的影片清单

 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>

这是我的渲染代码。我需要有关如何正确显示我的视频以及在点击时播放视频的帮助

穆罕默德·马斯(Mohammad Mas)

根据react-native-video docs:对于设备存储中的文件源,必须在路径开头写入'file://'

例:

来源= {{uri:'file:///sdcard/Movies/sintel.mp4'}}

阅读文档https://github.com/react-native-community/react-native-video#source

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何在React Native中的Flatlist中获取行索引

来自分类Dev

如何在 FLatList react native 中实现 Sraech bar

来自分类Dev

如何在react native中显示带有react native视频的多个视频?

来自分类Dev

如何在React Native中播放多个音频?

来自分类Dev

如何在 react-native 中播放音频?

来自分类Dev

如何使用ref在React Native Video中编辑视频播放器道具

来自分类Dev

在React Native中打开视频播放器

来自分类Dev

如何在React Native中的YouTube视频末尾禁用相关视频

来自分类Dev

如何在React Native中使用复选框检查FlatList中的单个项目?

来自分类Dev

我如何在加载数据时在 react-native FlatList 中渲染 isLoading 元素

来自分类Dev

如何在 React-Native FlatList 中突出显示搜索结果?

来自分类Dev

如何在 React-native 中删除 FlatList 右侧的小箭头图标?

来自分类Dev

如何在没有外部库的情况下在React中播放/暂停视频?

来自分类Dev

React Native-如何在FlatList属性上使用导航?

来自分类Dev

如何使用Axios React Native在FlatList中渲染共振?

来自分类Dev

如何解决FlatList React Native中的Key问题

来自分类Dev

如何在 react-native 中使用 ImageBackground 播放 gif?

来自分类Dev

从React Native中的FlatList中删除项目

来自分类Dev

React Native中的Flatlist图像源

来自分类Dev

React Native Flatlist中的网格视图

来自分类Dev

无法删除React Native FlatList中的项目

来自分类Dev

在 React Native 的 FlatList 中延迟加载项目?

来自分类Dev

如何在React Native中安装React Native Maps?

来自分类Dev

播放Dash或.mpd视频react-native(IOS)

来自分类Dev

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

来自分类Dev

如何在React Native FlatList中一次处理一个按钮?

来自分类Dev

如何在React Native中优化图像

来自分类常见问题

如何在React Native中禁用旋转?

来自分类Dev

如何在React Native中渲染对象?

Related 相关文章

  1. 1

    如何在React Native中的Flatlist中获取行索引

  2. 2

    如何在 FLatList react native 中实现 Sraech bar

  3. 3

    如何在react native中显示带有react native视频的多个视频?

  4. 4

    如何在React Native中播放多个音频?

  5. 5

    如何在 react-native 中播放音频?

  6. 6

    如何使用ref在React Native Video中编辑视频播放器道具

  7. 7

    在React Native中打开视频播放器

  8. 8

    如何在React Native中的YouTube视频末尾禁用相关视频

  9. 9

    如何在React Native中使用复选框检查FlatList中的单个项目?

  10. 10

    我如何在加载数据时在 react-native FlatList 中渲染 isLoading 元素

  11. 11

    如何在 React-Native FlatList 中突出显示搜索结果?

  12. 12

    如何在 React-native 中删除 FlatList 右侧的小箭头图标?

  13. 13

    如何在没有外部库的情况下在React中播放/暂停视频?

  14. 14

    React Native-如何在FlatList属性上使用导航?

  15. 15

    如何使用Axios React Native在FlatList中渲染共振?

  16. 16

    如何解决FlatList React Native中的Key问题

  17. 17

    如何在 react-native 中使用 ImageBackground 播放 gif?

  18. 18

    从React Native中的FlatList中删除项目

  19. 19

    React Native中的Flatlist图像源

  20. 20

    React Native Flatlist中的网格视图

  21. 21

    无法删除React Native FlatList中的项目

  22. 22

    在 React Native 的 FlatList 中延迟加载项目?

  23. 23

    如何在React Native中安装React Native Maps?

  24. 24

    播放Dash或.mpd视频react-native(IOS)

  25. 25

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

  26. 26

    如何在React Native FlatList中一次处理一个按钮?

  27. 27

    如何在React Native中优化图像

  28. 28

    如何在React Native中禁用旋转?

  29. 29

    如何在React Native中渲染对象?

热门标签

归档