我需要在我的 RN 應用程式中渲染一個帶有影像項的 FlatList，但看起來我錯過了一些東西。我正在獲取 blob 資料并使用 Buffer 將其決議為我的 API 中的字串并將其推送到我的陣列。我用那個陣列來渲染那個 FlatList
export function HomeScreen() {
const imagesList: any = [];
useEffect(() => {
loadData();
}, []);
const loadData = async () =>{
await callAPI().then(res => {
//blob base64 is from type jpeg
imagesList.push({imageURI: "data:image/jpeg;base64," Buffer.from(res.image1).toString('ascii')})
})
}
return (
<View style={[styles.imageSlider, {width, height}]}>
<FlatList
data={imagesList}
renderItem={({item, index}) => (
<>
{console.log('item: ', item)}
<Image
key={index}
source={{uri: item.imageURI}}
style={{
height,
width,
resizeMode: 'cover',
maxHeight: 500,
maxWidth: 500,
}}
/>
</>
)}
/>
</View>
)
}
我檢查了我從 api 收到的資料，一切都很好，但它沒有呈現
誰能告訴我我的問題？我不是RN專家 謝謝！
uj5u.com熱心網友回復：
我可以看到兩個問題...
- 你沒有使用任何狀態
- 您正在將緩沖區編碼為您想要 Base64 的 ASCII
// Define state using the useState hook
const [ imagesList, setImagesList ] = useState<Array<{ imageURI: string }>>([]);
const loadData = async () => {
const { image1 } = await callAPI()
// you want an array for some reason ˉ\_(ツ)_/ˉ
return [{
imageURI: `data:image/jpeg;base64,${Buffer.from(image1).toString("base64")}`
}]
}
useEffect(() => {
loadData.then(setImagesList)
}, [])
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/436940.html
標籤：javascript 打字稿 反应式 axios tsx