反应本机模块化-不能在模块化内滚动FlatList

Question

我使用的是react-native-modalize和flatListProps，但是我不能滚动flatList，我尝试了panGestureEnabled={false}，或者删除了height样式，但是没有一个修复它，下面是我的代码：

<Modalize
  ref={ref}
  children={children}
  adjustToContentHeight={true}
  onOverlayPress={closeModal}
  onClosed={onCloseCallback}
  HeaderComponent={renderHeader}
  flatListProps={
    listData?.length > 0
      ? {
          data: listData,
          renderItem: renderListItem,
          ItemSeparatorComponent: renderSeparator,
          keyExtractor: listKeyExtractor,
          contentContainerStyle: dStyles.dataList,
        }
      : undefined
  }
  modalStyle={styles.borderRadius}
/>

const dStyles = StyleSheet.create({
    dataList: {
      height: 400,
    },
  });

我检查listData，数组有63项，但flatList只呈现前9项。

Answer 1

通过在flatListProps中添加这些道具，修正了以下问题：

initialNumToRender: 10

maxToRenderPerBatch:10

并添加到<Modalize支柱disableScrollIfPossible={false}中

我不知道为什么，但height也需要删除。这是新代码：

<Modalize
      ref={ref}
      children={children}
      adjustToContentHeight={true}
      disableScrollIfPossible={false}
      onOverlayPress={closeModal}
      onClosed={onCloseCallback}
      HeaderComponent={renderHeader}
      flatListProps={
        listData?.length > 0
          ? {
              data: listData,
              renderItem: renderListItem,
              ItemSeparatorComponent: renderSeparator,
              keyExtractor: listKeyExtractor,
              initialNumToRender: 10,
              maxToRenderPerBatch: 10,
            }
          : undefined
      }
      modalStyle={styles.borderRadius}
    />

正如我前面提到的，我不能限制FlatList的高度，所以如果列表足够长，<Modalize就会全屏展开，这就是这个解决方案的局限性。