4.0 KiB

Raw Permalink Blame History

name	description
share-components	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`。

name

description

share-components

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 组件库

导入方式

import { Block, Text, Input, Img, VideoBox, Toast, Modal, ConfirmModal, SpinningLoader, ListEmpty } from '@/@share/components'

核心组件

Block - 万能容器

替代 View/Pressable/TouchableOpacity/Animated.View，根据 props 自动切换底层实现。

<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 - 文本

<Text className="text-[14px] text-white">内容</Text>
<Text onClick={handlePress}>可点击文本</Text>
<Text animated>动画文本</Text>

Input - 输入框

<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 压缩、占位图、磁盘缓存。

<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 播放。

<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 - 全局提示系统

单例模式，直接调用静态方法。

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'] })

红绿双按钮弹窗，通过 Toast.showModal 展示。

Toast.showModal(
  <Modal title="确定删除?" subTitle="删除后不可恢复" okText="删除" cancelText="取消"
    onOk={() => { handleDelete(); Toast.hideModal() }}
    onCancel={Toast.hideModal}
  />
)

ConfirmModal - 确认弹窗（完整版）

Brutalist 风格弹窗，支持自定义内容、加载状态。

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 - 空状态

<ListEmpty />
<ListEmpty hasError handleRetry={refetch} />

SpinningLoader - 旋转加载图标

<SpinningLoader />

设计规范

主题色: #FFE500 (accent/primary)
背景色: #1C1E22 / #16181B
文字色: #FFFFFF
风格: Brutalist (倾斜、粗边框、阴影)
样式: NativeWind className 优先

4.0 KiB Raw Permalink Blame History