如何获取本地视频列表并在 React Native 中以网格格式显示？答案

【问题标题】：How to get list of local videos and display them in grid format in React Native?如何获取本地视频列表并在 React Native 中以网格格式显示？
【发布时间】：2019-06-23 21:48:37
【问题描述】：

我正在尝试做一些类似于 Instagram 为他们选择的视频屏幕所做的事情。可以上传本地视频网格的地方，它会“预览”当前在网格本身上方选择的视频。

我正在使用 react-native-community/cameraroll，这是我试图获取视频的代码。

CameraRoll.getPhotos({first: 20, assetType: "All"})
        .then(r => this.setState({ videos: r.edges }))
        .catch((err) => {
            console.log('getVideosErr:' + err)
        })

我正在尝试使用我找到并尝试使用的一些示例代码来显示网格：

<ScrollView>
     {this.state.videos.map((p, i) => {
          return (
           <Video
              key={i}
              style={{
              width: 300,
              height: 100,
           }}
            source={{ uri: p.node.video.uri }}
            />
        ;
})}

我在模拟器上有一个视频，但每次我尝试抓取视频时都会收到一条错误消息“TypeError: Cannot read property 'uri' of undefined”。

现在不太确定问题出在哪里，我按照相机胶卷文档中的示例进行操作，但还没有运气。任何建议/示例将不胜感激。

【问题讨论】：

标签： android ios react-native mobile-development camera-roll

【解决方案1】：

使用react-native-media-helper

实现：

import MediaHelper from 'react-native-media-helper'

  <MediaHelper
    numVideos={20} // for android
    media='Videos'   // for ios
    num={20}      // for ios
    onCancel={() => this.setState({visible: false})}
    onSelectedItem={(item) => alert(JSON.stringify(item))}
  />

【讨论】：