Javascript React native:scrollview android性能中的扁平列表

因为我从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>

this.detailScrollView=c}
样式={{flex:1，背景色：{f8faf9}
>

编辑：

今天，多亏了@MaieonBrix，我把我的孩子们的扁平列表换成了分区列表，我觉得有点进步了。在测试中，安卓系统的构建仍然很简陋，但我认为我走在了正确的轨道上。我会不断更新

{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)}
              />

{descImgs&&！！descImgs.length？
this.goodsDesc=c}
style={{marginTop:22，marginBottom:22}}
keyExtractor={item=>item}
renderItem={function（{img}）{
返回(
{img.includes（“https:/”）(
) : 상세이미지가 없습니다.}
);
}.bind（这个）}
/>

没错。在android的scrollview下，Flatlist无法正常工作，因为两者在同一方向上使用相同的手势。可能的解决方案 1） 您可以使用pan responder库定义自定义手势，“这对于一个大人物来说有点困难”

2） 使用条件禁用/启用滚动。例如：当您触摸平面列表时，则禁用滚动视图，类似地，当打开滚动视图时，则禁用平面列表

上述解决方案仅适用于android，因为对于iOS，它将自动正常工作。类似地，您必须为flatlist容器提供水平边距。因为只有使用才能触摸边界附近的滚动视图容器。

---

希望它能澄清

为什么您需要这么多平面列表？您能改用SectionList组件吗？因为据文档介绍，它是“用于呈现分区列表的性能良好的界面，支持最方便的功能：”我认为这个设计有一个问题。它是没有意义的。如果每个平面列表都有一些项目可以改变它来查看。如果每个人都可以滚动更多，我建议更改UIdesign@MaieonBrix部分列表我不知道。我应该更换组件。@Lenoarod我也认为设计有点重，但这一点得到了首席执行官的确认。到目前为止，我应该坚持此设计…@SalJeong您应该尝试一下，获取数据，将其转换为SectionList组件（

data={[{title:“section title，可以为null”，data:[“任何数据类型的数组，每个列表项都将接收其数据”]}

）看看是否有改进。你甚至可以记忆数据转换以避免无用的重新渲染。是的，我发现问题只存在于android上……我可以试试你的解决方案。效果如何？你最终做了什么@SalJeong@AndrésLiu我使用嵌套的flatlist…包装器flatlist只有[1]作为数据，有大量的子平面列表，到目前为止，它工作得很好。