reactjs - React Native - Bottom Sheet 始终显示在安装上

Question

我正在将 React Native 与 Expo 结合使用，并尝试使用 Gorhom 的 Bottom Sheet 组件在用户单击按钮时显示 Bottom Sheet 。一切工作正常，除了 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

如果预期行为是在用户单击按钮时仅显示 Bottom Sheet ，那么它看起来更像是模式。有一个 BottomSheetModal 包装器/装饰器。

不要导入 BottomSheet，而是导入 BottomSheetModal。然后获取其引用并调用方法 bottomSheetRef.current.present() 和 bottomSheetRef.current.close()。通过这种方式，所有显示/隐藏向上/向下动画将立即生效。

看看documentation完整的例子。