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

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

create react本机应用程序AWS S3 getObject使用文件

2 个答案: