[英]React Native Modalize - cannot scroll FlatList inside Modalize
I'm using react-native-modalize
with flatListProps
but I can't scroll the flatList
, I tried panGestureEnabled={false}
, or remove the height
style but none of them fix it, here is my code:我将
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,
},
});
I check the listData
and the array has 63 items but the flatList
only render the first 9 items.我检查了
listData
,数组有 63 个项目,但flatList
只呈现前 9 个项目。
Fixed by adding to flatListProps
these props:通过将这些道具添加到
flatListProps
来修复:
initialNumToRender: 10
maxToRenderPerBatch:10
And add to <Modalize
prop disableScrollIfPossible={false}
并添加到
<Modalize
prop disableScrollIfPossible={false}
I'm not sure why but the height
is also need to be removed.我不确定为什么,但也需要删除
height
。 So this is new code:所以这是新代码:
<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}
/>
As I mentioned, I cannot limit the FlatList
height, so if the list is long enough, <Modalize
will be expanded full screen, that is the limitation of this solution.正如我提到的,我无法限制
FlatList
的高度,因此如果列表足够长, <Modalize
将展开全屏,这是此解决方案的限制。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.