我正在嘗試在 react-native 應用程式中使用 FlatList 構建一個簡單的布局，如下所示： example-image。我需要根據專案的索引創建一個動態布局，所以如果 index ===0 第一個影像應該很寬并且下面的列應該是連續 2 個較小的影像，這是我的代碼。
使用此邏輯，我可以將第一張影像顯示為寬，但??其余影像未正確顯示，我得到類似當前布局的內容 寬影像下方的較小影像旁邊有一個空白區域，如果我更改索引 === 5 相同事情發生了，寬影像下方的列有一個位置，另一個較小的影像應該是。我無法弄清楚為什么會發生這種情況以及如何解決它，我也在這里閱讀了其他帖子。非常感謝任何建議和幫助。
<FlatList
showsVerticalScrollIndicator={false}
contentContainerStyle={{
alignSelf: 'center',
alignItems: 'center',
}}
columnWrapperStyle={{flexWrap: 'wrap'}}
data={layoutData}
renderItem={({item, index}) =>
index === 0 ? (
<TouchableOpacity
style={styles.container}
<Image
style={styles.wideImg}
/>
</TouchableOpacity>
) : (
<TouchableOpacity
style={styles.container}
<Image
style={styles.img}
/>
</TouchableOpacity>
)
}
numColumns={2}
/>
uj5u.com熱心網友回復：
這是因為你設定了numColumns={2}，這使得FlatList每兩個專案渲染成一行。第一個大專案和第二個專案在同一行，第三個專案和第四個專案在新行中。所以第二項旁邊會有一個位置。您可以設定numColumns為長度layoutData而不是2。
<FlatList
showsVerticalScrollIndicator={false}
contentContainerStyle={{
alignSelf: 'center',
alignItems: 'center',
}}
columnWrapperStyle={{flexWrap: 'wrap'}}
data={layoutData}
renderItem={({item, index}) =>
index === 0 ? (
<TouchableOpacity
style={[styles.container, { width: '100%', height: 50, borderColor: 'white', borderWidth: 1 }]}
>
{/* <Image
style={styles.wideImg}
/> */}
</TouchableOpacity>
) : (
<TouchableOpacity
style={[styles.container, { width: '50%', height: 50, borderColor: 'white', borderWidth: 1 }]}
>
{/* <Image
style={styles.img}
/> */}
</TouchableOpacity>
)
}
numColumns={layoutData.length}
/>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/457201.html
標籤：反应式 包装 反应本机平面列表 平面列表 反应本机列表视图