前端移动开发UI组件跨平台【免费下载链接】react-native-bottom-sheetA performant interactive bottom sheet with fully configurable options 项目地址https://gitcode.com/gh_mirrors/re/react-native-bottom-sheet点击查看免费下载本文围绕 GitHub 加速计划 re / react-native-bottom-sheet 仓库对应 v4 版本文档中 hooks 文档 的核心内容展开系统讲解useBottomSheet、useBottomSheetDynamicSnapPoints、useBottomSheetSpringConfigs与useBottomSheetTimingConfigs四个官方 Hook 的用途、返回值和接入方式。读完本文你将掌握如何在 sheet 内部任意组件中通过 Hook 直接调用底部面板的公开方法与动画状态如何用CONTENT_HEIGHT占位符实现随内容自适应高度的动态 Snap Point以及如何分别用 spring 与 timing 两套配置定制面板切换动画并能结合仓库源码理解其底层实现。Hook 总览v4 版 hooks 文档共收录四个面向用户的 Hook均从gorhom/bottom-sheet包名导出实际对应本仓库的 src/hooks 目录Hook核心作用使用位置useBottomSheet向 sheet 内部组件暴露公开方法及animatedIndex、animatedPositionBottomSheet内部的任意组件useBottomSheetDynamicSnapPoints简化动态 Snap Point 处理用CONTENT_HEIGHT占位符测量内容高度BottomSheet/BottomSheetModal外部组件useBottomSheetSpringConfigs生成 spring 动画配置传入animationConfigspropuseBottomSheetTimingConfigs生成 timing 动画配置传入animationConfigspropuseBottomSheet在 sheet 内部访问公开方法与动画状态功能与适用场景useBottomSheet将底部面板的所有公开 methods 以及animatedIndex、animatedPosition两个动画共享值暴露给 sheet 的内部内容或 handle 组件。该 Hook 可以在BottomSheet内部任意组件中使用无需额外参数或 Provider。这一设计的价值在于当你的内容组件需要关闭面板切换到指定 Snap Point时不必再层层透传ref直接在子组件内调用 Hook 即可拿到方法。基本用法文档给出的最小示例演示了在 sheet 内容组件中调用expandimport React from react; import { View, Button } from react-native; import { useBottomSheet } from gorhom/bottom-sheet; const SheetContent () { const { expand } useBottomSheet(); return ( View Button onPress{expand} /View ) }可用成员方法与动画状态从 src/types.d.ts 的类型定义可知该 Hook 返回的是BottomSheetMethods BottomSheetVariables的并集方法成员BottomSheetMethods与文档 methods 一一对应snapToIndex(index, animationConfigs?)吸附到snapPoints中指定下标的点snapToPosition(position, animationConfigs?)吸附到任意像素或百分比位置脱离snapPoints列表expand(animationConfigs?)吸附到snapPoints的最大值完全展开collapse(animationConfigs?)吸附到snapPoints的最小值收起close(animationConfigs?)关闭面板forceClose(animationConfigs?)强制关闭期间阻止任何中断直到面板关闭完成。每个方法都可选的animationConfigs参数类型为WithSpringConfig | WithTimingConfig正好与下文两个动画配置 Hook 的产物类型对接。动画状态成员BottomSheetVariablesanimatedIndex: SharedValuenumber当前面板所处位置下标animatedPosition: SharedValuenumber当前面板位置像素值。源码实现基于 React Context从源码看该 Hook 的实现非常轻量本质是消费 Context// src/hooks/useBottomSheet.ts export const useBottomSheet () { const context useContext(BottomSheetContext); if (context null) { throw useBottomSheet cannot be used out of the BottomSheet!; } return context; };Context 由 src/contexts/external.ts 提供其类型即为BottomSheetMethods BottomSheetVariables | null。这意味着必须在BottomSheet内部调用否则会直接抛出useBottomSheet cannot be used out of the BottomSheet!animatedIndex/animatedPosition是 reanimated 的SharedValue在 JS 线程读取需要用.value在 UI 线程worklet中使用则无需额外操作。useBottomSheetDynamicSnapPoints让面板高度跟随内容自适应解决的问题固定 Snap Point如[25%, 50%]在内容高度不固定时会导致面板底部出现留白或内容被裁剪。该 Hook 简化了动态 Snap Point 的处理流程你只需在初始 snap points 中放入占位符CONTENT_HEIGHT它会被内容实际测量后的高度替换。返回值调用该 Hook 后会返回四项分别接入BottomSheet/BottomSheetModal的对应 propanimatedSnapPoints传给BottomSheet或BottomSheetModal的snapPointsanimatedHandleHeight动画化 handle 高度回调节点传给handleHeightanimatedContentHeight动画化内容高度传给contentHeighthandleContentLayout需要设置在BottomSheetView组件上的onLayout回调用于测量内容尺寸。完整用法示例文档给出的示例将CONTENT_HEIGHT与百分比并存内容区域包在BottomSheetView中并通过onLayout{handleContentLayout}上报尺寸import React from react; import BottomSheet, { useBottomSheetDynamicSnapPoints, } from gorhom/bottom-sheet; const App () { const initialSnapPoints useMemo(() [25%, CONTENT_HEIGHT], []); const { animatedHandleHeight, animatedSnapPoints, animatedContentHeight, handleContentLayout, } useBottomSheetDynamicSnapPoints(initialSnapPoints); return ( //... other views BottomSheet ref{bottomSheetRef} snapPoints{animatedSnapPoints} handleHeight{animatedHandleHeight} contentHeight{animatedContentHeight} BottomSheetView style{contentContainerStyle} onLayout{handleContentLayout} //... views to be measured /BottomSheetView /BottomSheet //... other views ); };底层原理动态 Snap Point 的计算逻辑虽然useBottomSheetDynamicSnapPoints是面向用户的封装其核心算法可追溯到仓库内部的 useAnimatedSnapPoints.ts。该实现揭示了动态 Snap Point 的完整推导过程布局未就绪时兜底当容器高度仍是初始值INITIAL_CONTAINER_HEIGHT -999定义见 bottomSheet/constants.ts时返回占位INITIAL_SNAP_POINT避免闪烁归一化把所有 snap points 用normalizeSnapPoint将百分比换算为像素动态点计算dynamicSnapPoint containerHeight - min(contentHeight handleHeight footerHeight, maxDynamicContentSize ?? containerHeight)即面板顶部位置 容器高度减去内容 手柄 底部组件的总高度同时受maxDynamicContentSize上限约束去重与排序若动态点不在原列表则追加然后按从大到小排序并记录动态点所在下标供dynamicSnapPointIndex使用。因此使用该 Hook 时handleHeight与contentHeight必须被正确传入否则handleHeight或contentHeight仍为初始值会提前返回占位点——这正是示例中同时设置handleHeight{animatedHandleHeight}、contentHeight{animatedContentHeight}的原因。useBottomSheetSpringConfigs生成弹性动画配置功能useBottomSheetSpringConfigs用于生成 spring弹簧动画配置产物可直接传给BottomSheet的animationConfigsprop让面板的吸附、展开、关闭动画呈现弹性物理效果。用法与参数import React from react; import BottomSheet, { useBottomSheetSpringConfigs } from gorhom/bottom-sheet; const SheetContent () { const animationConfigs useBottomSheetSpringConfigs({ damping: 80, overshootClamping: true, restDisplacementThreshold: 0.1, restSpeedThreshold: 0.1, stiffness: 500, }); return ( BottomSheet // ... other props animationConfigs{animationConfigs} {CONTENT HERE} /BottomSheet ) }参数含义与调参建议其参数类型对应 reanimated 的WithSpringConfig源码中排除了velocity即OmitWithSpringConfig, velocity参见 useBottomSheetSpringConfigs.tsdamping阻尼系数值越大弹簧回弹衰减越快、越接近干脆落地值越小越容易来回震荡stiffness刚度值越大响应越快更硬mass质量值越大惯性越强未出现在示例中为可选项overshootClamping是否禁止过冲。true时动画不会越过目标值配合高stiffness可获得干脆的到位效果restDisplacementThreshold判定到达的位移阈值像素restSpeedThreshold判定到达的速度阈值。作为参考仓库 iOS 平台默认弹簧配置为damping: 500、stiffness: 1000、mass: 3、overshootClamping: true、restDisplacementThreshold: 10、restSpeedThreshold: 10见 src/constants.ts 的ANIMATION_CONFIGS_IOS可据此对比感受参数量级。useBottomSheetTimingConfigs生成时长缓动动画配置功能useBottomSheetTimingConfigs用于生成 timing时间驱动动画配置动画按固定时长与缓动函数推进行为更可控、可预期。用法与参数import React from react; import BottomSheet, { useBottomSheetTimingConfigs } from gorhom/bottom-sheet; import { Easing } from react-native-reanimated; const SheetContent () { const animationConfigs useBottomSheetTimingConfigs({ duration: 250, easing: Easing.exp, }); return ( BottomSheet // ... other props animationConfigs{animationConfigs} {CONTENT HERE} /BottomSheet ) }参数含义与默认值duration动画时长毫秒。仓库默认值为ANIMATION_DURATION 250见 src/constants.tseasing缓动函数来自 reanimated 的Easing。仓库默认值为Easing.out(Easing.exp)ANIMATION_EASING即先快后慢的指数缓出这也是为什么文档示例选用Easing.expreduceMotion可选控制是否降低动画如响应系统减少动态效果无障碍设置。源码实现useBottomSheetTimingConfigs.ts会在调用时自动填充默认值duration缺省用 250、easing缺省用Easing.out(Easing.exp)并用useMemo缓存结果依赖duration、easing、reduceMotion变化才会重新计算。如何在两者之间选择需要弹性、跟手、有物理感的交互例如列表拖动松手后的吸附优先useBottomSheetSpringConfigs配合overshootClamping可收敛过冲需要固定时长、节奏一致的过渡例如按钮触发的展开/收起、模态切换优先useBottomSheetTimingConfigsdurationeasing组合更易在 UI 中保持一致性两个 Hook 的产物都同时满足WithSpringConfig | WithTimingConfig类型因此也均可作为snapToIndex、snapToPosition、expand、collapse、close等方法的可选第二个参数实现不同操作、不同手感的精细控制。小结useBottomSheet通过 Context 向BottomSheet内部组件提供 methods 与animatedIndex/animatedPosition在 Context 之外调用会抛错useBottomSheetDynamicSnapPoints以CONTENT_HEIGHT占位符 onLayout测量实现内容自适应高度底层算法见 useAnimatedSnapPoints.tsuseBottomSheetSpringConfigs生成WithSpringConfig排除velocityuseBottomSheetTimingConfigs生成WithTimingConfig并内置duration: 250、Easing.out(Easing.exp)默认值见 useBottomSheetSpringConfigs.ts、useBottomSheetTimingConfigs.ts四个 Hook 均从gorhom/bottom-sheet导入对应本仓库 src/hooks 目录下的实现类型约束集中在 src/types.d.ts。如需查看更多用法可结合仓库的 v4 版文档目录 website/versioned_docs/version-4 下的props.md、methods.md、usage.md以及components/子目录查阅完整 API 说明。赞分享前端移动开发UI组件跨平台【免费下载链接】react-native-bottom-sheetA performant interactive bottom sheet with fully configurable options 项目地址https://gitcode.com/gh_mirrors/re/react-native-bottom-sheet点击查看免费下载相关推荐React Native Bottom Sheet 手势交互与动画实现React Native Bottom Sheet 手势交互与动画实现 本文深入探讨了React Native Bottom Sheet组件的手势交互系统与动画前端移动开发UI组件跨平台react-native-bottom-sheet与lottie动画集成打造生动交互反馈react native bottom sheet与lottie动画集成打造生动交互反馈 在移动应用开发中用户交互反馈是提升体验的关键。底部弹窗Botto前端移动开发UI组件跨平台如何快速集成React Native Bottom Sheet打造流畅交互体验的完整指南如何快速集成React Native Bottom Sheet打造流畅交互体验的完整指南 React Native Bottom Sheet是一个高性能、可高前端移动开发UI组件跨平台上一篇在 SolidStart 中集成 ffmpeg.wasm从 Solid CLI 脚手架到浏览器端视频转码实战下一篇2T tokens如何炼就代码AIDeepSeek-Coder预训练数据技术解密创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考