1

我的 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

4

2 回答 2

3

AWS Amplify 库的存储模块中有一些组件可以更轻松地从 S3 上传/下载/渲染图像：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} />
于 2017-11-19T19:11:06.433 回答
3

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

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

我认为您可以为此使用此缓冲区库。

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}}/>
于 2017-09-14T16:03:09.427 回答