在 React Native 上显示 Google Drive 图像

Question

我正在构建一个 React Native 应用程序，并尝试显示品牌列表及其相应的图像。这些图像（700 多张）全部位于 Google 云端硬盘文件夹中。

我之前使用的是无代码工具，只需粘贴图像链接即可渲染，但它不适用于 React Native。

知道如何做到这一点吗？

Answer 1

1- 前往 Drive 并获取前照片的公共链接：https://drive.google.com/file/d/176kEvQYm2MPJ80UDxRWjiFq0OK1OkhYc/view?usp=sharing

2- 访问此网站 https://www.labnol.org/embed/google/drive/ 并获取嵌入链接

import React from 'react';
import { Image } from 'react-native';

const imageUrl = "https://lh3.googleusercontent.com/drive-viewer/AITFw-w28cTZxDoEn727SvoA_VrO7btaWSb2h-YzleV4QvQfNkPqFoJG1R4Qw_Gwj_ttAdmW9vE8qxQcEc3d8Z3JoYIiYPsjXw=s1600"

const MyComponent=()=> {
    return (
       <Image
        source={{ uri: testPhotoUri }}
        className="w-14 h-14 rounded-full mr-2"
       />
    );
};

您应该看到这样的图像：

ps：你应该设置图像的高度和宽度，在我的例子中是。 h-14 和 w-14 因为我使用的是 tailwindCss。你也可以这样做：

  <Image
   style={{ height: 56, width: 56, borderRadius: 28 }}
   source={{ uri: imageUrl }}
   className="w-14 h-14 rounded-full mr-2"
  />