@ buoy- gg/ 下表
A React 本地组件,带有下表和浮动窗口模式,可配置标题和页脚,以及拖放到大小的手势.
特征
- 📱 双模式 - 底页和浮动窗口模式
- 🎨 完全自定义 - 自定义标题、主题和样式
- ✋ 触摸手势 - 拖放以调整大小, 双拖放以切换模式, 三拖放以关闭
- 🔄 平滑过渡 - 以春为主的自然感觉动画
- 📐 智能边界 - 尊重安全地区和筛选边界
- 依赖关系 - 要求反应和反应原生并使用Buoy共享的用户界面软件包
- 🎯 类型脚本 - 全面安全和情报支持
安装
npm install @buoy-gg/bottom-sheet
# or
yarn add @buoy-gg/bottom-sheet
# or
pnpm add @buoy-gg/bottom-sheet
基本用途
import React, { useState } from 'react';
import { View, Text, Button } from 'react-native';
import { BottomSheet } from '@buoy-gg/bottom-sheet';
function MyComponent() {
const [visible, setVisible] = useState(false);
return (
<View>
<Button title="Open Bottom Sheet" onPress={() => setVisible(true)} />
<BottomSheet
visible={visible}
onClose={() => setVisible(false)}
header={{
title: "My Bottom Sheet",
subtitle: "Drag to resize"
}}
>
<View style={{ padding: 20 }}>
<Text>Your content here!</Text>
</View>
</BottomSheet>
</View>
);
}
打开工作表,拖取其头,切换模式,并关闭检查基本整合.
高级使用
这些片段重复使用 visible,其设置器,以及您自己的内容或从周围组件中保存处理器.
自定义 主题
<BottomSheet
visible={visible}
onClose={() => setVisible(false)}
theme={{
primary: '#FF6B6B',
secondary: '#4ECDC4',
background: '#1A1A2E',
panel: '#16213E',
success: '#06FFA5',
}}
>
<YourContent />
</BottomSheet>
带页脚
<BottomSheet
visible={visible}
onClose={() => setVisible(false)}
footer={
<View style={{ padding: 16, borderTopWidth: 1, borderTopColor: '#ccc' }}>
<Button title="Save" onPress={handleSave} />
</View>
}
footerHeight={60}
>
<YourContent />
</BottomSheet>
自定义信头
<BottomSheet
visible={visible}
onClose={() => setVisible(false)}
header={{
customContent: (
<View style={{ padding: 16 }}>
<Text style={{ fontSize: 18, fontWeight: 'bold' }}>
Custom Header
</Text>
</View>
)
}}
>
<YourContent />
</BottomSheet>
浮动窗口模式
<BottomSheet
visible={visible}
onClose={() => setVisible(false)}
initialMode="floating"
onModeChange={(mode) => console.log('Mode changed to:', mode)}
>
<YourContent />
</BottomSheet>
高度控制
<BottomSheet
visible={visible}
onClose={() => setVisible(false)}
initialHeight={500}
minHeight={200}
maxHeight={800}
>
<YourContent />
</BottomSheet>
道具
底盘方案
| Prop | 类型 | 默认 | 说明 |
|---|---|---|---|
visible | boolean | 所需经费 | 控制底页的可见度 |
onClose | () => void | 所需经费 | 工作表关闭时召回 |
children | ReactNode | 所需经费 | 在工作表中显示的内容 |
header | BottomSheetHeaderConfig | undefined | 页眉配置 |
styles | CustomStyles | {} | 容器和内容的自定义样式 |
minHeight | number | 100 | 底页模式最小高度 |
maxHeight | number | screen height - safe area | 底工作表模式的最大高度 |
initialHeight | number | 400 | 底层工作表模式的初始高度 |
initialMode | 'bottomSheet' | 'floating' | 'bottomSheet' | 初始显示模式 |
onModeChange | (mode) => void | undefined | 模式改变时召回 |
footer | ReactNode | undefined | 页脚内容( 在底部粘贴) |
footerHeight | number | 0 | 内容粘贴页脚的高度 |
onBack | () => void | undefined | 召回回后动作( 可操作于左上角水龙头) |
theme | Partial<Theme> | defaultTheme | 自定义颜色主题 |
下页头配置
| Prop | 类型 | 说明 |
|---|---|---|
title | string | 标题文本 |
subtitle | string | 页眉字幕文本 |
customContent | ReactNode | 自定义标题内容( 替换标题/ 子标题) |
hideCloseButton | boolean | 隐藏关闭按钮 |
手势
- 拖动页眉 - 调整底盘大小或移动浮动窗口
- 双磁带头 - 切换底层工作表和浮动模式
- 三重磁带头 - 关闭工作表
- 拖放角( 浮动) - 调整浮动窗口的大小
- TAP 右上角 (浮起) - 关闭工作表
- Tap Top- Left Corner (浮出水面) - 触发后动作(如果
onBack(已提供) - 快速刷下 - 关闭底页
业绩
该组件使用回放原生动画和手势. 实际帧率取决于设备负荷,工作表内容,以及您的应用程序. 配置文件拖放和重新调整具有代表性的内容 .
类型脚本
导出类型的全类型脚本支持 :
import {
BottomSheet,
BottomSheetProps,
BottomSheetMode,
BottomSheetHeaderConfig
} from '@buoy-gg/bottom-sheet';
许可证
麻省理工学院
贷项
基于React Independent Buoy工具包中证明的JsModal组件.