React Native Modalize -无法在Modalize中滚动FlatList

x7yiwoj4 于 2023-04-12 发布在 React

关注(0)|答案(2)|浏览(211)

我正在使用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个项目。

react-native

来源：https://stackoverflow.com/questions/71715804/react-native-modalize-cannot-scroll-flatlist-inside-modalize

2条答案

按热度按时间

zynd9foi1#

通过向flatListProps添加以下 prop 修复：
initialNumToRender: 10
maxToRenderPerBatch:10
并添加到<Modalize prop 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将全屏展开，这就是这个解决方案的局限性。

赞(0）回复(0）举报 2023-04-12

y53ybaqx2#

此问题的原因是**adjustToContentHeight={true}**您可以通过执行以下操作来控制它

adjustToContentHeight={listData?.length > 3 ? false : true}

赞(0）回复(0）举报 2023-04-12

我来回答

React Native Modalize -无法在Modalize中滚动FlatList

2条答案

相关问题

热门标签

最新问答