創建反應原生應用程序AWS S3 getObject使用文件

我的RN應用程序是使用create react native應用程序創建的。現在我想顯示我的aws s3存儲桶的一些圖像。創建反應原生應用程序AWS S3 getObject使用文件

所以這個工作得很好，如果我做的圖像公衆和顯示它們：

<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我想d將它們作爲圖像顯示。我如何使用create-react-native-app來做到這一點？

我試着反應母語-FS但是，這並不與創建反應的原生應用程序內

來源

2017-09-14 Schachjunge

工作，我沒有測試這一點，但我沒有編譯夫婦的信息，可以爲你工作。請嘗試一下，看看它是否會爲你工作。

首先您要從S3接收數組緩衝區。您可以將此數組緩衝區轉換爲緩衝區，然後將此緩衝區轉換爲可用作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}}/>

來源

2017-09-14 16:03:09 bennygenel

有一些組件更容易上傳/下載/渲染從S3圖像在AWS擴增出庫的存儲模塊：https://github.com/aws/aws-amplify/blob/master/media/storage_guide.md

陣營的本機擴展爲AWS中擴增通過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} />

來源

2017-11-19 19:11:06 Richard

一個解決方案的鏈接是值得歡迎的，但請確保你的答案沒有它是有用的：[添加背景周圍的鏈接]（// meta.stackexchange .com/a/8259），所以你的同行用戶會有一些想法是什麼，爲什麼它在那裏，然後引用你鏈接到的頁面最相關的部分，以防目標頁面不可用。 [僅僅是一個鏈接的答案可能會被刪除。]（// stackoverflow.com/help/deleted-answers） – LW001

@ LW001更新了一個例子 – Richard

創建反應原生應用程序AWS S3 getObject使用文件

回答

相關問題