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

Dishant Chanchad

参考:

阿努·夏玛(Anuj Sharma)

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

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

希望能对您有所帮助,请放心。

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,
  },
});

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

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

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

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

来自分类Dev

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

来自分类Dev

尝试在React Native中的模态中显示视频

来自分类Dev

尝试在React Native中的模态中显示视频

来自分类Dev

有没有办法在React Native App上播放youtube视频并仅显示视频而不显示youtube?

来自分类Dev

如何在React Native中显示图标?

来自分类Dev

在React Native中使用FormData上传视频

来自分类Dev

在React Native中打开视频播放器

来自分类Dev

更改视频 react-native-video 组件中的状态/道具

来自分类Dev

如何播放具有多个视频流的视频?

来自分类Dev

如何在反应中显示多个视频流?

来自分类Dev

尝试在react-native-video中全屏显示时视频消失

来自分类Dev

react native 在我的本机应用程序中不显示视频,解决方案是什么?

来自分类Dev

如何在react native(没有json)中添加带有平面列表的搜索栏?

来自分类Dev

如何在带有钩子的React Native中使用refs?

来自分类Dev

有没有办法在React Native(适用于Android)中添加视频元素?

来自分类Dev

如何在带有React Native的Android中隐藏状态栏?

来自分类Dev

如何在react-native中从子组件(带有参数)调用父函数?

来自分类Dev

如何在 React Native 中实现带有标签布局的折叠工具栏

来自分类Dev

如何在react native中创建带有xy坐标的动态数组

来自分类Dev

如何在带有音频和视频过滤器的网页中显示视频?

来自分类Dev

无法使用带有uri的React Native显示图像

来自分类Dev

如何在React Native中显示动画gif?

来自分类常见问题

如何在React Native App中显示超链接?

来自分类Dev

如何在react-native android应用中显示GIF?

来自分类Dev

如何在React Native中显示获取的数据

来自分类Dev

如何在React Native的两栏中显示卡片?

来自分类Dev

如何在React Native中按组显示数组值

来自分类Dev

如何在React Native中水平显示来自API的数据

Related 相关文章

  1. 1

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

  2. 2

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

  3. 3

    尝试在React Native中的模态中显示视频

  4. 4

    尝试在React Native中的模态中显示视频

  5. 5

    有没有办法在React Native App上播放youtube视频并仅显示视频而不显示youtube?

  6. 6

    如何在React Native中显示图标?

  7. 7

    在React Native中使用FormData上传视频

  8. 8

    在React Native中打开视频播放器

  9. 9

    更改视频 react-native-video 组件中的状态/道具

  10. 10

    如何播放具有多个视频流的视频?

  11. 11

    如何在反应中显示多个视频流?

  12. 12

    尝试在react-native-video中全屏显示时视频消失

  13. 13

    react native 在我的本机应用程序中不显示视频,解决方案是什么?

  14. 14

    如何在react native(没有json)中添加带有平面列表的搜索栏?

  15. 15

    如何在带有钩子的React Native中使用refs?

  16. 16

    有没有办法在React Native(适用于Android)中添加视频元素?

  17. 17

    如何在带有React Native的Android中隐藏状态栏?

  18. 18

    如何在react-native中从子组件(带有参数)调用父函数?

  19. 19

    如何在 React Native 中实现带有标签布局的折叠工具栏

  20. 20

    如何在react native中创建带有xy坐标的动态数组

  21. 21

    如何在带有音频和视频过滤器的网页中显示视频?

  22. 22

    无法使用带有uri的React Native显示图像

  23. 23

    如何在React Native中显示动画gif?

  24. 24

    如何在React Native App中显示超链接?

  25. 25

    如何在react-native android应用中显示GIF?

  26. 26

    如何在React Native中显示获取的数据

  27. 27

    如何在React Native的两栏中显示卡片?

  28. 28

    如何在React Native中按组显示数组值

  29. 29

    如何在React Native中水平显示来自API的数据

热门标签

归档