const renderPost = ({ item }) => {
const mediaUri = `:5001${item.media_url}`;
return (
<View
style={{ padding: 10, borderBottomWidth: 1, borderBottomColor: "#ccc" }}
>
<Text style={{ fontWeight: "bold" }}>{item.user_id}</Text>
{item.media_url &&
item.media_url.endsWith(".mp4") &&
isValidUrl(mediaUri) ? (
<View style={{ width: "100%", height: 200 }}>
<VideoView
source={{ uri: mediaUri }}
style={{ width: "100%", height: 300 }}
useNativeControls // Use native controls for play/pause etc.
resizeMode="contain"
shouldPlay // Start playing as soon as it's loaded
isLooping // Loop the video
onError={(error) => console.log("Video Error:", error)}
onLoadStart={() => console.log("Loading video...")}
onLoad={() => console.log("Video loaded successfully")}
/>
</View>
) : item.media_url && isValidUrl(mediaUri) ? (
<Image
source={{ uri: mediaUri }}
style={{ width: "100%", height: 200, marginVertical: 10 }}
resizeMode="contain"
/>
) : (
<Text>Invalid media URL</Text>
)}
<Text>{item.caption}</Text>
</View>
);
};
I am new to react native development and trying to render video on my React native app, the video uri is coming from my nodeJs backend which stores the media files in /uploads folder using multer. While the images are shown the video does not show, it just shows a blank space. Please help, thanks in advance
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1744488848a4576725.html
评论列表（0条）