问题描述: 在使用React Native开发时,部分视频缩略图显示为黑色。
解决方法:
示例代码:
import React, { useState, useEffect } from 'react';
import { Image } from 'react-native';
import { getThumbnail } from 'react-native-thumbnail';
const VideoThumbnail = ({ videoUrl }) => {
const [thumbnail, setThumbnail] = useState(null);
useEffect(() => {
const fetchThumbnail = async () => {
try {
const thumbnail = await getThumbnail(videoUrl);
setThumbnail(thumbnail);
} catch (error) {
console.log('Error fetching thumbnail:', error);
}
};
fetchThumbnail();
}, [videoUrl]);
return (
);
};
export default VideoThumbnail;
在上述示例中,我们使用了react-native-thumbnail库来生成视频缩略图,并将其作为Image组件的source。确保安装了该库,并在项目中引入它。
在VideoThumbnail组件中,我们通过useState和useEffect来异步获取视频缩略图。一旦获取到缩略图,我们使用setThumbnail函数更新state,并将其作为Image组件的source进行显示。