React Native - 底部工作表始终显示在安装座上

Question

我正在将 React Native 与 Expo 结合使用，并尝试使用 Gorhom 的 Bottom Sheet 组件在用户单击按钮时显示底部表单。一切工作正常，除了底部工作表坚持始终在屏幕安装上弹出，这显然很糟糕，它应该只在用户单击触发器（如按钮）时弹出。

这是我的组件：

import BottomSheet, { BottomSheetScrollView } from '@gorhom/bottom-sheet'

<BottomSheet
      ref={sheetRef}
      enableOverDrag
      handleIndicatorStyle={styles.handleIndicator}
      snapPoints={snapPoints}
      enablePanDownToClose
    >
      <BottomSheetScrollView>
        {children}
      </BottomSheetScrollView>
    </BottomSheet>

我尝试切换显示无/弯曲，但这使得弹出窗口不平滑并且非常突然：

containerStyle={[styles.container, {display: showSheet ? 'flex' : 'none'}]}

我已经浏览了整个文档两次，但没有发现任何可以帮助我的东西。

Answer 1

如果预期行为是在用户单击按钮时仅显示底部工作表，那么它看起来更像是模式。有

BottomSheetModal

包装器/装饰器。

不要导入

BottomSheet

，而是导入

BottomSheetModal

。然后获取它的引用并调用方法

bottomSheetRef.current.present()

和

bottomSheetRef.current.close()

。这样做，所有显示/隐藏向上/向下动画将立即起作用。

查看文档以获取完整示例。

Answer 2

我也为这个问题苦苦挣扎了一段时间。您可以将“index”设置为“-1”以将底部工作表启动为关闭状态。这是参考链接。

https://gorhom.github.io/react-native-bottom-sheet/props/#index