创建本机应用程序 AWS S3 getObject 使用文件

Question

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

所以这很好用，如果我制作图像 public 并显示它们：

<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 转换为缓冲区，然后将此缓冲区转换为可用作图像组件源的 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 获取 uploading/downloading/rendering 图像：https://github.com/aws/aws-amplify/blob/master/media/storage_guide.md

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

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} />

创建本机应用程序 AWS S3 getObject 使用文件

create react native app AWS S3 getObject use file

amazon-s3

aws-sdk

react-native

create-react-native-app

aws-amplify