如何在 React Native 中使用 React Native Video 显示多个视频？ [关闭]

Posted 2023-03-15

【中文标题】如何在 React Native 中使用 React Native Video 显示多个视频？ [关闭]

【英文标题】：How can I show multiple videos with React Native Video in React Native? [closed]

【发布时间】：2020-02-14 09:30:29

【问题描述】：

如何使用 React Native 的 React Native Video 组件显示多个视频？

这里是React Native Video GitHub 存储库。

【参考方案1】：

您可以将视频存储在 Array 中，就像将数组存储在 var array 中一样，并使用 Flatlist 并将数据作为存储在 array 变量中的数组传递，然后将平面列表项呈现为视频标签。

平面列表将显示列表中的所有视频。

import React from 'react';
import  SafeAreaView, View, FlatList, StyleSheet, Text  from 'react-native';

const Videos = [
  
    Videourl: 'url1',
  ,
  
    Videourl: 'url2',
  ,
  
    Videourl: 'url3',
  ,
];


export default function App() 
  return (
    <SafeAreaView style=styles.container>
      <FlatList
        data=DATA
        renderItem=( item ) =>
      <Video source=item.Videourl  
   ref=(ref) => 
     this.player = ref
                                         
   onBuffer=this.onBuffer               
   onError=this.videoError               
   style=styles.backgroundVideo />
        keyExtractor=item => item.id
      />
    </SafeAreaView>
  );


const styles = StyleSheet.create(
  container: 
    flex: 1,
    marginTop: 10,
  ,
  item: 
    backgroundColor: '#f9c2ff',
    padding: 20,
    marginVertical: 8,
    marginHorizontal: 16,
  ,
  title: 
    fontSize: 32,
  ,
);

【讨论】：

嘿@AnujSharma，当我尝试实现相同功能时，它显示“正在加载空源”，知道这是为什么吗？

嗨@TRINACHAUDHURI，我认为您的 Array 存在一些问题，我猜 flatlist 的值为 Empty。