我的資料看起來像這樣
["https://files-bucket.s3.ap-southeast-1.amazonaws.com/61681a7d32ac23af58589eef/CompanyImages/CompanyImages.jpg","https://files-bucket.s3.ap-southeast-1.amazonaws.com/61681a7d32ac23af58589eef/CompanyImages/CompanyImages.jpg","https://files-bucket.s3.ap-southeast-1.amazonaws.com/61681a7d32ac23af58589eef/CompanyImages/CompanyImages.jpg","https://files-bucket.s3.ap-southeast-1.amazonaws.com/61681a7d32ac23af58589eef/CompanyImages/CompanyImages.jpg"]
現在我想連續顯示這 4 張影像
我是這樣映射的
{Data.CompanyImages.map((item) => {
<View style={{flexDirection: 'row'}}>
<Image
style={{
height: 80,
width: 80,
marginTop: 1.5,
borderRadius: 7,
}}
source={{uri: item}}
/>
</View>;
})}
但它沒有顯示任何東西請幫忙
uj5u.com熱心網友回復：
在瀏覽器中打開你串列中的任意一張圖片，你可以看到有一個錯誤回傳，請確保你在你的 S3 中將圖片設定為公共訪問或調整你的代碼以傳遞一些引數來表明對這些圖片的訪問是有效且 S3 回傳內容
檢查您的圖片鏈接
<Error>
<Code>PermanentRedirect</Code>
<Message>The bucket you are attempting to access must be addressed using the specified endpoint. Please send all future requests to this endpoint.</Message>
<Endpoint>s3.amazonaws.com</Endpoint>
<Bucket>files-bucket</Bucket>
<RequestId>Z72TT83DFD04M8EJ</RequestId>
<HostId>AMuc/KSYXayYgzkigho3CTqNluTLEDAI/EYUug3U4NKsJB8xbnJSDsFn8VlaNZ50N73EAWhi2p0=</HostId>
</Error>
uj5u.com熱心網友回復：
考慮到您Data是有效的并且Data.CompanyImages是您在問題中顯示的陣列，那么我在您的代碼中看到了兩個問題。
- 你必須
JSX從你的map函式中回傳。 - 用帶有
flexDirection=的 View 包裹 map 函式row
將您的地圖更改為，
<View style={{flexDirection: 'row'}}> // wrap list with flexDirection row
{Data.CompanyImages.map((item) => ( //returning JSX with ()
<Image
style={{
height: 80,
width: 80,
marginTop: 1.5,
borderRadius: 7,
}}
source={{uri: item}}
/>
))}
</View>
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/315550.html
標籤：javascript 反应原生 数组映射