Как получить список локальных видео и отобразить их в формате сетки в React Native?

Question

Я пытаюсь сделать что-то похожее на то, что есть в Instagram для экрана избранных видео.Где сетка локальных видео, которые могут быть загружены, и это будет своего рода «предварительный просмотр» того, который в настоящее время выбран над самой сеткой.

Я использую response-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: Невозможно прочитать свойство« uri »из undefined» каждый раз, когда я пытаюсьзахватывая видео.

Не совсем уверен, в чем проблема сейчас, я следовал за примерами в документации по съемке камеры, но пока не повезло.Любые советы / примеры будут оценены.

Answer 1

Использование Reaction-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))}
  />