создать реактивное собственное приложение AWS S3 getObject, использовать файл

мое приложение RN создается с помощью приложения create react native. Теперь я хочу отобразить несколько изображений моего ведра 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-fs, но это не работает с create-react-native-app


react-native amazon-s3 aws-amplify aws-sdk create-react-native-app
person ChrisRob    schedule 14.09.2017    source источник

Ответы (2)


arrow_upward
3
arrow_downward

Я не проверял это, но собрал пару сведений, которые могут вам пригодиться. Пожалуйста, попробуйте и посмотрите, сработает ли это для вас.

Прежде всего, вы получаете буфер массива от 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}}/>
person bennygenel    schedule 14.09.2017

arrow_upward
3
arrow_downward

В модуле хранения библиотеки AWS Amplify есть несколько компонентов для упрощения загрузки/выгрузки/рендеринга изображений из S3: https://github.com/aws/aws-amplify/blob/master/media/storage_guide..md

Расширения React Native для AWS Amplify доступны через 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} />
person Richard    schedule 19.11.2017
comment
Ссылка на решение приветствуется, но убедитесь, что ваш ответ полезен и без нее: добавьте контекст вокруг ссылки, чтобы другие пользователи иметь некоторое представление о том, что это такое и почему оно там, а затем процитировать наиболее релевантную часть страницы, на которую вы ссылаетесь, в случае, если целевая страница недоступна. Ответы, которые представляют собой не более чем ссылку, могут быть удалены. - person LW001; 19.11.2017
comment
хороший пример использования библиотеки amplify можно найти здесь: github .com/aws-образцы/ - person Dr. Younes Henni; 16.10.2018