145 lines
4.0 KiB
Markdown
145 lines
4.0 KiB
Markdown
---
|
|
name: share-components
|
|
description: >
|
|
Duooomi 应用核心 UI 组件库 (@share/components) 使用指南。当需要使用 Block、Text、Input、Img、VideoBox、Toast、Modal、ConfirmModal、SpinningLoader、ListEmpty、Overlay 等基础组件时触发。适用于：(1) 编写页面 UI 布局 (2) 使用 Toast 提示/Loading/弹窗/ActionSheet (3) 展示图片或视频 (4) 表单输入 (5) 空状态和加载状态展示。导入路径为 `@/@share/components` 或 `@share/components`。
|
|
---
|
|
|
|
# @share/components 组件库
|
|
|
|
## 导入方式
|
|
|
|
```tsx
|
|
import { Block, Text, Input, Img, VideoBox, Toast, Modal, ConfirmModal, SpinningLoader, ListEmpty } from '@/@share/components'
|
|
```
|
|
|
|
## 核心组件
|
|
|
|
### Block - 万能容器
|
|
|
|
替代 `View`/`Pressable`/`TouchableOpacity`/`Animated.View`，根据 props 自动切换底层实现。
|
|
|
|
```tsx
|
|
<Block className="flex-1 items-center">...</Block>
|
|
<Block onClick={() => handlePress()}>...</Block>
|
|
<Block onClick={handlePress} opacity={0.85}>...</Block>
|
|
<Block onLongPress={handleLongPress}>...</Block>
|
|
<Block animated>...</Block>
|
|
```
|
|
|
|
Props: `onClick`, `onLongPress`, `animated`, `opacity`, `className`, `style`, `touchProps`
|
|
|
|
### Text - 文本
|
|
|
|
```tsx
|
|
<Text className="text-[14px] text-white">内容</Text>
|
|
<Text onClick={handlePress}>可点击文本</Text>
|
|
<Text animated>动画文本</Text>
|
|
```
|
|
|
|
### Input - 输入框
|
|
|
|
```tsx
|
|
<Input
|
|
className="w-full rounded-lg border-2 border-black px-[12px] py-[10px]"
|
|
placeholder="请输入"
|
|
value={value}
|
|
onChangeText={setValue}
|
|
secureTextEntry={isPassword}
|
|
/>
|
|
```
|
|
|
|
### Img - 图片
|
|
|
|
基于 `expo-image`，内置 CDN 压缩、占位图、磁盘缓存。
|
|
|
|
```tsx
|
|
<Img src="https://cdn.roasmax.cn/xxx.webp" className="size-[100px]" />
|
|
<Img src={url} isCompression width={256} />
|
|
<Img src={url} placeholderSrc={thumbnailUrl} />
|
|
<Img src={require('@/assets/images/icon.png')} />
|
|
```
|
|
|
|
Props: `src`, `width`(压缩宽度), `isCompression`, `isWebP`, `placeholderSrc`, `cacheKey`, `errorSource`
|
|
|
|
### VideoBox - 视频/动图
|
|
|
|
自动将 MP4 URL 转为 WebP 动图展示，内置缓存。本地文件用 `react-native-video` 播放。
|
|
|
|
```tsx
|
|
<VideoBox url="https://cdn.roasmax.cn/material/xxx.mp4" width={256} style={{ width: 180, height: 180 }} />
|
|
<VideoBox url={videoUrl} placeholderUrl={thumbnailUrl} width={360} />
|
|
<VideoBox url={url} autoplay={false} />
|
|
```
|
|
|
|
### Toast - 全局提示系统
|
|
|
|
单例模式，直接调用静态方法。
|
|
|
|
```tsx
|
|
Toast.show({ title: '操作成功' })
|
|
Toast.show({ title: '保存中...', duration: 3000 })
|
|
Toast.show({ renderContent: () => <CustomView /> })
|
|
Toast.hide()
|
|
|
|
Toast.showLoading({ title: '加载中...' })
|
|
Toast.showLoading({ duration: 0 }) // 不自动消失
|
|
Toast.hideLoading()
|
|
|
|
Toast.showModal(<ConfirmModal title="确认?" onConfirm={fn} onCancel={Toast.hideModal} />)
|
|
Toast.hideModal()
|
|
|
|
const index = await Toast.showActionSheet({ itemList: ['选项1', '选项2'] })
|
|
```
|
|
|
|
### Modal - 确认弹窗（简版）
|
|
|
|
红绿双按钮弹窗，通过 `Toast.showModal` 展示。
|
|
|
|
```tsx
|
|
Toast.showModal(
|
|
<Modal title="确定删除?" subTitle="删除后不可恢复" okText="删除" cancelText="取消"
|
|
onOk={() => { handleDelete(); Toast.hideModal() }}
|
|
onCancel={Toast.hideModal}
|
|
/>
|
|
)
|
|
```
|
|
|
|
### ConfirmModal - 确认弹窗（完整版）
|
|
|
|
Brutalist 风格弹窗，支持自定义内容、加载状态。
|
|
|
|
```tsx
|
|
Toast.showModal(
|
|
<ConfirmModal title="确认支付?" badge="PAYMENT" content="将扣除 100 积分"
|
|
confirmText="确认" cancelText="取消" onConfirm={handlePay} onCancel={Toast.hideModal}
|
|
/>
|
|
)
|
|
|
|
// 自定义内容
|
|
<ConfirmModal title="修改密码" badge="password"
|
|
content={<Block>...表单...</Block>} confirmLoading={loading}
|
|
onConfirm={handleSubmit} onCancel={handleCancel}
|
|
/>
|
|
```
|
|
|
|
### ListEmpty - 空状态
|
|
|
|
```tsx
|
|
<ListEmpty />
|
|
<ListEmpty hasError handleRetry={refetch} />
|
|
```
|
|
|
|
### SpinningLoader - 旋转加载图标
|
|
|
|
```tsx
|
|
<SpinningLoader />
|
|
```
|
|
|
|
## 设计规范
|
|
|
|
- 主题色: `#FFE500` (accent/primary)
|
|
- 背景色: `#1C1E22` / `#16181B`
|
|
- 文字色: `#FFFFFF`
|
|
- 风格: Brutalist (倾斜、粗边框、阴影)
|
|
- 样式: NativeWind className 优先
|