在 android 6 及更低版本上反应原生平面列表空白区域



平面列表有 600 个项目,我使用像页面一样的水平视图 我在安卓馅饼上测试并且工作得很好,在安卓 6 棉花糖上有很多空白区域。 我尝试使用initialNumToRender,maxToRenderPerBatch,updateCellsBatchingPerio和windowSize,但我没有得到想要的结果。我还使用animated.view作为页眉和页脚。是否有一些针对大型平面列表的解决方案,或者对于适用于 android 和 ios 的大型视图页的其他解决方案。

getItemLayout = (data, index) => (
{length: WIDTH, offset: WIDTH * index, index}
)
renderItem1=({item}) => {
return(
<View style={styles.container} key={item.key}>
{Object.values(item)[0].map((it, key) => {
return key == 0 ?
<TouchableOpacity key={key} activeOpacity={1} style= . 
{styles.imageView} onPress= 
.{this.showHeaderFooter}>
<Image style={{ width: IMGWIDTH, height: IMGHEIGHT }} source= . 
{it.url} />
</TouchableOpacity>
: null
})
}
</View>
)}
<FlatList
onViewableItemsChanged={this.onViewableItemsChanged }
viewabilityConfig={{
itemVisiblePercentThreshold: 50
}}
data={data1}
horizontal={true}
keyExtractor={(item, index) => index.toString()}
extraData={this.state}
showsHorizontalScrollIndicator={false}
removeClippedSubviews={false}
initialNumToRender={600}
maxToRenderPerBatch={60}
updateCellsBatchingPeriod={150}
windowSize={21}
legacyImplementation={false}
initialScrollIndex={this.state.numPage}
getItemLayout={this.getItemLayout}
pagingEnabled={true}
renderItem={this.renderItem}
/>

你使用的是哪个版本的 React Native?我在Android上的React Native> 60上遇到了类似的问题,但是在IOS上很好,在Android上的React Native <60上也很好。现在我继续使用 React Native <60,但这不是一个好的解决方案,因为它限制了我对依赖项的作用。如果我找到更好的答案,我会编辑它。

最新更新