英文:
gorhom/react-native-bottom-sheet | Increase the swipe down area of bottom sheet
问题
大家好，
我正在使用https://github.com/gorhom/react-native-bottom-sheet
我需要扩大底部表的向下滑动区域，如下图所示。目前，它只在手柄指示器上启用，因为我已经设置了enableContentPanningGesture={false}，以便表内的内容可以滚动。
我尝试在内容的高亮部分添加PanResponder，如下所示：
const ActionSheetHeader = (props) => {
const pan = useRef(new Animated.ValueXY()).current;
const panResponder = useRef(
PanResponder.create({
onMoveShouldSetPanResponder: () => true, // 检测向下滑动
onPanResponderRelease: () => {
sheetRef?.current.close();
},
}),
).current;
return (
<View
{...panResponder.panHandlers}>
{/* 头部内容 */}
</View>
)
}
<BottomSheetModal
snapPoints={['100%']}
name="MySheet"
onDismiss={onDismiss}
ref={sheetRef}
style={styles.container}
backgroundStyle={styles.backgroundStyle}
handleIndicatorStyle={styles.handleIndicatorStyle}
enableContentPanningGesture={false}
stackBehavior="push">
<BottomSheetView>
<ActionSheetHeader />
<AcionSheetContent /> // 内容
</BottomSheetView>
</BottomSheetModal>
当我拖动到高亮部分时，操作表会关闭，没有任何动画，是否可以使其具有与从手柄指示器向下拉表时相同的行为？
谢谢。
英文:
Hi All,
I am using https://github.com/gorhom/react-native-bottom-sheet
I need to increase the swipe-down area of the bottom sheet as highlighted below. Currently, it is only enabled on the handle indicator as I have set the enableContentPanningGesture={false} so that content inside the sheet is scrollable.
I tried adding the PanResponder on the highlighted partof the content as below :
const ActionSheetHeader = (props) => {
const pan = useRef(new Animated.ValueXY()).current;
const panResponder = useRef(
PanResponder.create({
onMoveShouldSetPanResponder: () => true, // detect pan down
onPanResponderRelease: () => {
sheetRef?.current.close();?
},
}),
).current;
return (
<View
{...panResponder.panHandlers}>
{/* Contents of header */}
</View>
)
<BottomSheetModal
snapPoints={['100%']}
name="MySheet"
onDismiss={onDismiss}
ref={sheetRef}
style={styles.container}
backgroundStyle={styles.backgroundStyle}
handleIndicatorStyle={styles.handleIndicatorStyle}
enableContentPanningGesture={false}
stackBehavior="push">
<BottomSheetView>
<ActionSheetHeader />
<AcionSheetContent /> // contents
</BottomSheetView>
</BottomSheetModal>
When I drag over the highlighted section, action sheet closes without any animation, is it possible to have the same behavior as we pull down the sheet from the handle Indicator?
Thanks.
答案1
得分: 2
我相信你可以将那个突出显示的组件放到 "handleComponent" 属性中，这样整个突出显示的部分将被视为手柄，应该会按预期运行。
英文:
I believe you can put that highlighted component inside the prop "handleComponent"
that way the whole highlighted section would be considered as the handle and should behave like expected
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论