创建反应原生应用 AWS S3 getObject 使用文件

Question

我的 RN 应用是使用 create react native app 创建的。现在我想显示我的 aws s3 存储桶的一些图像。

所以这很好用，如果我将图像公开并显示它们：

<Image source={props.pic_url} />

当然，图像应该是私有的，所以我尝试使用 S3 API 加载它们：

export const s3 = new AWS.S3({
  apiVersion: '2006-03-01',
  params: {Bucket: BUCKET_NAME}
});
let get_pic_params = {
  Bucket: BUCKET_NAME,
  Key: "pics/0001.jpg"
}
s3.getObject(get_pic_params, function(err, data) {
    if (err) {
      console.log('There was an error getting a pic: ' + err.message);
    } else {
      console.log(data);
    }
  });

输出：

Object {
  "AcceptRanges": "bytes",
  "Body": Object {
    "data": Array [
      71,
      73,
      70,
      56,
      .
      .
      .
      59,
    ],
    "type": "Buffer",
  },
  "ContentLength": 45212,
  "ContentType": "image/jpeg",
  "ETag": "\"c90bf3bb902711c8b1386937341ca9ec\"",
  "LastModified": 2017-09-13T12:40:35.000Z,
  "Metadata": Object {},
}

这很好用，但我不想将数据作为 console.log 获取，我想将它们显示为图像。如何使用 create-react-native-app 做到这一点？

我尝试了 react-native-fs 但这不适用于 create-react-native-app

Answer 1

我没有对此进行测试，但我确实编译了一些对您有用的信息。请尝试一下，看看它是否适合您。

首先，您从 S3 接收一个数组缓冲区。您可以将此arrayBuffer 转换为缓冲区，然后将此缓冲区转换为可用作Image 组件源的Base64 字符串。

我认为您可以为此使用 buffer 库。

const buffer = Buffer.from(arrayBuffer); //returned data 
const base64ImageData = buffer.toString('base64');
const imgSrc = "data:image/png;base64," + base64ImageData;
<Image source={{uri: imgSrc, scale: 1}} style={{ height: 80, width: 80}}/>

Answer 2

AWS Amplify 库的存储模块中有一些组件可以更轻松地从 S3 上传/下载/渲染图像：https://github.com/aws/aws-amplify/blob/master/media/storage_guide.md

可通过 npm 获得 AWS Amplify 的 React Native 扩展：

npm install -g @aws-amplify/cli

您需要从那里配置您的项目。最新说明可在此处获得：https://aws-amplify.github.io/media/get_started。

对于您的用例，您可以使用S3Album:

import { S3Album } from 'aws-amplify-react';

render() {
    const path = // path of the list;
    return <S3Album path={path} />