使用来自 aws-amplify-react-native 的 S3Image答案

【问题标题】：Using S3Image from aws-amplify-react-native使用来自 aws-amplify-react-native 的 S3Image
【发布时间】：2019-09-19 03:46:44
【问题描述】：

我正在使用 React Native / Expo 来构建一个应用程序。我设置了 AWS S3，以及使用 withAuthenticator 登录的 cognito。我的图像上传工作正常，但是当我尝试显示图像时它不起作用。这是我正在使用的代码：

const ImageList = ({ 
  imageId,
  getImages,
  images = [],
}) => {
  useEffect(() => {
    getImages(imageId);
  }, []);

  return (
    <View>
      <Card title="Images">
        {images.map((value, idx) => (
          <S3Image imgKey={value.key} level="private" />
        ))}
      </Card>
    </View>
  );
}

我的getImages 函数（redux 操作）使用Storage.list 获取S3 存储桶中的图像列表。它返回的值很好。但是S3Images 组件没有渲染任何东西。我也尝试过使用Storage.get 从 S3 获取 URL，然后使用 react-native 中的Image，但这也不起作用。有什么想法吗？

【问题讨论】：

标签： reactjs react-native amazon-s3 expo aws-amplify

【解决方案1】：

您需要在 S3Image 组件的样式属性中添加宽度和高度。如果宽度或高度为 0，则组件不显示。

<S3Image imgKey={value.key} level="private" style={{ width: 100, height: 100 }}/>

【讨论】：