用reactnative实现列表展示视频
时间: 2023-02-28 15:51:22 浏览: 131
计算机前端-实战.目视频4-12.实现课程的列表展示..mp4
在React Native中,可以使用FlatList组件实现列表展示视频。首先,需要准备好视频的URL或本地路径,然后在FlatList的每一项中使用Video组件播放视频。代码示例如下:
```
import React from 'react';
import { FlatList, View, Text, Video } from 'react-native';
const videoData = [
{
id: 1,
url: 'https://example.com/video1.mp4',
},
{
id: 2,
url: 'https://example.com/video2.mp4',
},
{
id: 3,
url: 'https://example.com/video3.mp4',
},
];
const VideoList = () => {
return (
<FlatList
data={videoData}
keyExtractor={item => item.id.toString()}
renderItem={({ item }) => (
<View>
<Video source={{ uri: item.url }} />
</View>
)}
/>
);
};
export default VideoList;
```
这样,就可以实现列表展示视频的效果了。
阅读全文