レスキューネイティブアプリを作成するAWS S3 getObjectファイルを使用する

Question

私のRNアプリはcreate reactネイティブアプリで作成されています。今私は私のaws s3バケットのいくつかの画像を表示したい。

だから、これは私が画像を公開することとし、それらを表示する場合、正常に動作します：

<Image source={props.pic_url} /> 

しかし、もちろんイメージがprivateである必要がありますので、私は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 {}, 
} 

これは正常に動作しますが、私はDにしたいにconsole.logなどのデータを取得したいいけませんイメージとしてそれらを表示します。どうすればcreate-react-native-appでそれを行うことができますか？

私が反応し、ネイティブ-FSしようとしたが、それは作成反応するネイティブアプリ

Answer 1

では動作しません。私はこれをテストしていないが、私はあなたのために働くことができ、情報のカップルをコンパイルしました。それを試して、あなたのためにうまくいくかどうかを見てください。

まず、S3から配列バッファを受け取っています。このarrayBufferをbufferに変換し、このバッファを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ソフトウェアのネイティブ拡張を反応させるのは、NPMを経由して利用できます。

npm install aws-amplify-react-native 

そこからプロジェクトをリンクする必要があります。手順はhttps://github.com/aws/aws-amplify/blob/master/media/quick_start.md#react-native-developmentです。あなたがS3Albumを使用する可能性がありますあなたのユースケースについては

：

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

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