react-nativescrollview嵌套多flashlist滚动异常

Question

有我的代码。scrollview嵌套了两个flashList，

• 如果我不限制flashlist高度，它会第一时间渲染所有项目。

• 如果我使用视图元素来包裹它们，当第一个列表滚动到底部时滚动将停止。

• github代码：https://github.com/vanBlayt/rn-flashlist-demo，我已经推送了代码。

      <ScrollView
        style={{ flex: 1 }}
        scrollEnabled={outerScrollEnable}
        nestedScrollEnabled
        ref={scrollViewRef}
      >
        <View style={{ height: height, backgroundColor: "#333" }}>
          <FlashList
            data={list}
            keyExtractor={keyExtractor}
            renderItem={renderItem}
            estimatedItemSize={68}
            // style={{ flex: 1 }}
            scrollEnabled={goodsScrollEnable}
            nestedScrollEnabled
            onEndReached={handleGoodsEndReached}
            renderScrollComponent={renderScrollComponent}
          />
        </View>
        <View style={{ height, backgroundColor: "#fff" }}>
          <FlashList
            data={list2}
            keyExtractor={keyExtractor}
            renderItem={renderItem}
            estimatedItemSize={68}
            // style={{ flex: 1 }}
            scrollEnabled={recommendScrollEnable}
            nestedScrollEnabled
            renderScrollComponent={renderScrollComponent}
          />
        </View>
      </ScrollView>

• 所有项目均延迟渲染
• 滚动流畅且连贯

Answer 1

滚动内的 FlashList 使嵌套滚动，如果您需要实现两个方向相同的 FlashList 您应该尝试它使无界布局案例在 onLoad 时渲染所有列表项，您应该尝试

1. 将数组中的数据连接起来并使用一个 FlashList 进行渲染，FlashList 文档：如果您的列表具有异构视图，请使用 getItemType 属性将其类型传递到 FlashList 以提高性能。
2. 根据需要在 {ListFooter, ListHeader} 组件中通过数组映射制作一个小列表。

按照上述示例中的任何一个，如果您遇到任何问题发表评论，我会帮助您解决。