原生React : scrollview android性能中的扁平列表

Question

自从我从RN docs那里听到这句话“永远不要把平面列表放在滚动视图的包装器里”。

但我有一个很大的页面要做，它需要一个滚动条，而且还有孩子们的扁平列表。

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

这是我的代码片段。

 <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，我把我的孩子们的扁平表换成了SectionLists，可以感觉到一点进步。在测试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

在安卓的scrollview下，true.Flatlist不能很好地工作，因为两者在相同的direction.Possible解决方案中使用相同的手势1)你可以使用pan响应器库来定义你的自定义手势，“这对于大个子来说有点困难”

2)禁用/启用条件滚动。e-g:当你触摸平面列表时，同样在scrollView上禁用scrollView滚动，然后禁用平面列表滚动。

上面的解决方案只适用于安卓系统，因为对于iOS，它可以很好地工作，你必须为扁平列表容器automatically.Similarly提供水平边距，然后才能使用.Becuse触摸边界附近的滚动视图容器。希望它能放空