用途:为在 React Native 应用中集成 @lodev09/react-native-true-sheet v4 提供正确、地道的写法,包括挑选合适的集成模式、正确使用公共 API,并规避平台特定陷阱。环境要求 React Native >= 0.82(Expo SDK 55+),且需启用新架构。
控制方式:同一组件内用 ref 调用 present()、dismiss()、resize(index);触发点远离窗格时可用全局静态方法 TrueSheet.present/dismiss/resize/dismissAll(仅原生,名称全应用唯一);需要 Web 支持或 hook 控制时使用 TrueSheetProvider + useTrueSheet()(Web 还须安装 @radix-ui/react-dialog 与 @radix-ui/react-presence);导航流程用 createTrueSheetNavigator() / Expo Router Sheet;需要同步动画值时用 ReanimatedTrueSheet。
内容布局:v4 内容默认按子元素高度自然布局,不自动填满窗格;子元素用 flex: 1 时须在窗格 style 上传 flex: 1,否则高度塌为 0。detent 最多 3 个并从小到大排序,默认 [0.5, 1];'auto' 按内容自适应,'peek' 收起高度由 TrueSheetPeek 标记决定(无标记则回退 150),0–1 为屏幕高度比例。
常用配方:滚动内容传 scrollableRef(固定 detent 时配合 style={{ flex: 1 }},'auto' 无需);固定页眉页脚用 header/footer 属性,避免手动绝对定位与安全区内边距重复;地图式收起用 TrueSheetPeek;悬浮层用 TrueSheetOverlay(勿放 react-native-screens 容器,Android 会崩溃);不可关闭确认用 dismissible={false} 与 draggable={false},退出确认用 onDismissAttempt 配合状态切换 dismissible。
注意事项:resize() 传 detent 索引而非比例;滚动容器不必是直接子元素;页脚会原生吸收底部安全区,勿重复添加 padding;不要在窗格内 TextInput 上使用 autoFocus,改用 onDidPresent 聚焦;iOS 关闭 Modal 前先 dismiss 窗格;Sheet Navigator 中原生栈放在基础屏而非窗格屏。平台差异('auto'/'peek'、背景模糊、静态方法、dim 等)在 iOS、Android、Web 上并不一致,需按表核对。详细 API 与高级模式参见官方参考。