不可能。无法从视频 URL 自动生成视频缩略图。它应该与后端数据库中的视频一起创建和存储，当 RN 应用程序收到视频 URL 时，它也应该收到缩略图 URL。然后您可以使用Image和TouchableOpacity组件在缩略图上添加按压行为。

但是，如果您只使用 Youtube 视频，那么react-native-thumbnail-video可能是您问题的快速解决方案。

不幸的是，没有react-native组件/api 可以做到这一点。但是，您可以利用原生 OS api（AVAssetImageGenerator在 ios 和MediaMetadataRetrieverandroid 上）从 react-native 应用程序中的视频 url 生成缩略图。

要获得快速解决方案，您可以使用react-native-create-thumbnail。它是上述系统 api 的包装器，并支持远程和本地视频。

可以使用Expo Video Thumbnail 库

就像这个例子

import React from 'react';
import { StyleSheet, Button, View, Image, Text } from 'react-native';
import * as VideoThumbnails from 'expo-video-thumbnails';

export default class App extends React.Component {
  state = {
    image: null,
  };

  generateThumbnail = async () => {
    try {
      const { uri } = await VideoThumbnails.getThumbnailAsync(
        'http://d23dyxeqlo5psv.cloudfront.net/big_buck_bunny.mp4',
        {
          time: 15000,
        }
      );
      this.setState({ image: uri });
    } catch (e) {
      console.warn(e);
    }
  };

  render() {
    const { image } = this.state;
    return (
      <View style={styles.container}>
        <Button onPress={this.generateThumbnail} title="Generate thumbnail" />
        {image && <Image source={{ uri: image }} style={{ width: 200, height: 200 }} />}
        <Text>{image}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
});

-更新-

另一种方法是使用视频库而不播放视频和控制器

例子：

npm install --save react-native-video



import Video from 'react-native-video';

// Within your render function, assuming you have a file called
// "background.mp4" in your project. You can include multiple videos
// on a single screen if you like.

<Video source={{uri: "background"}}   // Can be a URL or a local file.
       paused={true}
controls={false}
/>

在这个例子中，它会显示视频而不播放它，所以基本上会给你缩略图。

PS：如果同一视图中的多个视频超过 10 个，则不建议使用。

您可以通过以下步骤执行此操作：

步骤 1：使用以下命令在当前项目上安装“react-native-link-preview”包：

yarn add react-native-link-preview

第 2 步：这是您可以获取链接详细信息的代码：如链接标题、链接缩略图等。

LinkPreview.getPreview('https://www.youtube.com/watch?v=MejbOFk7H6c')
        .then(data => console.debug(data));

完整代码：

import React, { Component } from 'react';
import { Text, View, FlatList, Image } from 'react-native';
import LinkPreview from 'react-native-link-preview';

let links = [
    {
        link: 'https://aws.amazon.com/'
    },
    {
        link: 'https://firebase.google.com/'
    },
    {
        link: 'https://www.youtube.com/watch?v=Kmiw4FYTg2U'
    },
    {
        link: 'https://en.wikipedia.org/wiki/React_Native'
    },
    {
        link:'https://stackoverflow.com/'
    }
];

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            linkData: []
        };
    }

    async componentDidMount() {
        let _tempLinkData = [];
        for (let link of links) {
            await LinkPreview.getPreview(link.link)
                .then(data => {
                    console.debug("Data : ", data);
                    let _newLinkDetails = {
                        link: link.link,
                        title: data.title,
                        thumbnail: data.images[0]
                    };
                    _tempLinkData.push(_newLinkDetails);
                });

        }
        this.setState({ linkData: _tempLinkData });
    }

    render() {
        return (
            <View style={{ marginTop: 35 }}>
                <FlatList
                    contentContainerStyle={{ paddingHorizontal: 20}}
                    data={this.state.linkData}
                    renderItem={({ item }) => (
                        <View style={{ flex: 1, flexDirection: "row", padding: 5 }}>
                            <Image
                                style={{ width: 50, height: 50 }}
                                source={{ uri: item.thumbnail }}
                            />
                            <View style={{ marginLeft: 10, }}>
                                <Text style={{ fontSize: 16, lineHeight: 20, }}>{item.title}</Text>
                                <View style={{ flex: 1, flexDirection: "row", justifyContent: "space-between", }}>
                                    <Text style={{ fontSize: 16, lineHeight: 20, color: "#a1a1a1" }}>{item.link}</Text>
                                </View>
                            </View>
                        </View>
                    )}

                    keyExtractor={(item, index) => String(index)}
                />
            </View>

        );
    }
}