javascript - react native : flatlists inside scrollview android performance

Question

因为我从 RN 文档中听到“永远不要将平面列表放入 ScrollView 包装器”。

但我要制作一个巨大的页面，它本身需要一个卷轴，而且还有子平面列表。

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

这是我的代码片段。

 <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，我将我的 child 平面列表替换为 SectionLists，可能会有所改进。在测试 android build 时它仍然很糟糕，但我认为我走在正确的轨道上。我会及时更新。

{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

没错1) 您可以使用平移响应程序库定义您的自定义手势，“这对大个子来说有点难”

2) 使用条件禁用/启用滚动。例如:当您触摸平面列表时，禁用 scrollView 的滚动类似地，当在 scrollView 上时，然后禁用平面列表。

以上解决方案仅适用于 Android，因为对于 iOS 它会自动正常工作。同样，您必须为 flatlist 容器提供水平边距。因为只有这样才能使用边界附近的 ScrollView 容器。希望它清除