React native:Scrollview android 性能中的平面列表

Question

因为我从 RN 文档中听到了这一点，"永远不要在滚动视图包装器中放置平面列表"。

但是我有一个巨大的页面要制作，它本身需要一个滚动，而且还有儿童平面列表。

当然，这会导致可怕的滚动滞后用户体验，所以有没有人遇到和我一样的问题？对此的解决方案是什么？

这是我的片段。

<View style={{ flex: 1 }}>
<ScrollView
ref={c => this.detailScrollView = c}
style={{ flex: 1, backgroundColor: "#f8faf9" }}
>
<FlatList1 goodsDetails />
<FlatList2 goodsPriceSelector />
<FlatList3 bestreviews />
<FlatList4 sellerGoods />
<FlatList5 sameCategoryGoods />
</ScrollView>
</View>

编辑：

今天，多亏了@MaieonBrix我把我的儿童平面列表替换为SectionList，可以感觉到一点改进。在测试android构建中，它仍然很卡顿，但我认为我走在正确的轨道上。我会保持更新。

{descImgs && !!descImgs.length  ?
<SectionList
sections={descImgs.slice(0,2)}
ref={c => this.goodsDesc = c}
style={{ marginTop: 22, marginBottom: 22 }}
keyExtractor={item => item}
renderItem={function ({ img }) {
return (
<View style={{ alignSelf: "center" }}>
{img.includes("https://") ? (
<FastImage
resizeMode={FastImage.resizeMode.contain}
style={{ height: width, width: width, }}
source={{ uri: img }}
/>
) : <TextNoScailing>상세이미지가 없습니다.</TextNoScailing>}
</View>
);
}.bind(this)}
/>

Answer 1

嗯，这是真的。平面列表在 android 的滚动视图下无法正常工作，因为两者都在同一方向上使用相同的手势。可能的解决方案 1(您可以使用平移响应器库定义自定义手势"这对于大玩家来说有点困难">

2(使用条件禁用/启用滚动.e-g：当您触摸平面列表时，然后禁用滚动视图的滚动，同样在滚动视图上，然后禁用平面列表。

上述解决方案仅适用于Android，因为对于iOS它会自动正常工作。同样，您必须为平面列表容器提供水平边距。只有这样才能触摸边界附近的滚动视图容器。 希望它清除