# React Native Elements 设计系统 ## React Native Elements 设计系统界面预览 编辑任务、时长和休息选项，并检查验证、外观和重置行为。 ## React Native Elements 设计系统设计参考 固定版本的 RNEUI 源码默认值、公开组件 API，以及明确标注的应用自行设计内容。 ### 浅色主题颜色 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | lightColors.primary | #2089dc | RNEUI 主题的实际取值。black/white 等角色在深色模式下会反转视觉含义；请使用当前主题，而不要硬编码颜色字面值。 | | lightColors.secondary | #ad1457 | RNEUI 主题的实际取值。black/white 等角色在深色模式下会反转视觉含义；请使用当前主题，而不要硬编码颜色字面值。 | | lightColors.background | #ffffff | RNEUI 主题的实际取值。black/white 等角色在深色模式下会反转视觉含义；请使用当前主题，而不要硬编码颜色字面值。 | | lightColors.black | #242424 | RNEUI 主题的实际取值。black/white 等角色在深色模式下会反转视觉含义；请使用当前主题，而不要硬编码颜色字面值。 | | lightColors.white | #ffffff | RNEUI 主题的实际取值。black/white 等角色在深色模式下会反转视觉含义；请使用当前主题，而不要硬编码颜色字面值。 | | lightColors.grey1 | #43484d | RNEUI 主题的实际取值。black/white 等角色在深色模式下会反转视觉含义；请使用当前主题，而不要硬编码颜色字面值。 | | lightColors.grey2 | #5e6977 | RNEUI 主题的实际取值。black/white 等角色在深色模式下会反转视觉含义；请使用当前主题，而不要硬编码颜色字面值。 | | lightColors.grey5 | #e1e8ee | RNEUI 主题的实际取值。black/white 等角色在深色模式下会反转视觉含义；请使用当前主题，而不要硬编码颜色字面值。 | | lightColors.success | #52c41a | RNEUI 主题的实际取值。black/white 等角色在深色模式下会反转视觉含义；请使用当前主题，而不要硬编码颜色字面值。 | | lightColors.error | #ff190c | RNEUI 主题的实际取值。black/white 等角色在深色模式下会反转视觉含义；请使用当前主题，而不要硬编码颜色字面值。 | | lightColors.warning | #faad14 | RNEUI 主题的实际取值。black/white 等角色在深色模式下会反转视觉含义；请使用当前主题，而不要硬编码颜色字面值。 | ### 深色主题颜色 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | darkColors.primary | #439ce0 | RNEUI 主题的实际取值。black/white 等角色在深色模式下会反转视觉含义；请使用当前主题，而不要硬编码颜色字面值。 | | darkColors.secondary | #aa49eb | RNEUI 主题的实际取值。black/white 等角色在深色模式下会反转视觉含义；请使用当前主题，而不要硬编码颜色字面值。 | | darkColors.background | #080808 | RNEUI 主题的实际取值。black/white 等角色在深色模式下会反转视觉含义；请使用当前主题，而不要硬编码颜色字面值。 | | darkColors.black | #f2f2f2 | RNEUI 主题的实际取值。black/white 等角色在深色模式下会反转视觉含义；请使用当前主题，而不要硬编码颜色字面值。 | | darkColors.white | #080808 | RNEUI 主题的实际取值。black/white 等角色在深色模式下会反转视觉含义；请使用当前主题，而不要硬编码颜色字面值。 | | darkColors.grey1 | #bdc6cf | RNEUI 主题的实际取值。black/white 等角色在深色模式下会反转视觉含义；请使用当前主题，而不要硬编码颜色字面值。 | | darkColors.grey2 | #86939e | RNEUI 主题的实际取值。black/white 等角色在深色模式下会反转视觉含义；请使用当前主题，而不要硬编码颜色字面值。 | | darkColors.grey5 | #393e42 | RNEUI 主题的实际取值。black/white 等角色在深色模式下会反转视觉含义；请使用当前主题，而不要硬编码颜色字面值。 | | darkColors.success | #439946 | RNEUI 主题的实际取值。black/white 等角色在深色模式下会反转视觉含义；请使用当前主题，而不要硬编码颜色字面值。 | | darkColors.error | #bf2c24 | RNEUI 主题的实际取值。black/white 等角色在深色模式下会反转视觉含义；请使用当前主题，而不要硬编码颜色字面值。 | | darkColors.warning | #cfbe27 | RNEUI 主题的实际取值。black/white 等角色在深色模式下会反转视觉含义；请使用当前主题，而不要硬编码颜色字面值。 | ### 默认间距与明确标注的应用自行设计内容 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | spacing.xs | 2 | 已发布的默认间距入口；这些名称属于主题对象，而非 CSS 变量令牌。 | | spacing.sm | 4 | 已发布的默认间距入口；这些名称属于主题对象，而非 CSS 变量令牌。 | | spacing.md | 8 | 已发布的默认间距入口；这些名称属于主题对象，而非 CSS 变量令牌。 | | spacing.lg | 12 | 已发布的默认间距入口；这些名称属于主题对象，而非 CSS 变量令牌。 | | spacing.xl | 24 | 已发布的默认间距入口；这些名称属于主题对象，而非 CSS 变量令牌。 | | Sample heading | 32px / weight 700 | 这是原创示例的取值，在所提供的源码中明确配置，并非官方全局类型或圆角令牌。 | | Sample body | 15px / 23px line height | 这是原创示例的取值，在所提供的源码中明确配置，并非官方全局类型或圆角令牌。 | | Sample cards | 24px padding / 8px radius | 这是原创示例的取值，在所提供的源码中明确配置，并非官方全局类型或圆角令牌。 | | Button component default | radius: 6 | 这是原创示例的取值，在所提供的源码中明确配置，并非官方全局类型或圆角令牌。 | ### 组件与 Provider 约定 | 名称 / 规则 | 值 / 配置 | 用途 | | --- | --- | --- | | createTheme | mode, components, lightColors, darkColors | ThemeProvider 接收构造好的对象；仅更改组件时仍可使用默认值。 | | useTheme | theme, updateTheme | 外观操作会切换模式，但不会重置应用状态。 | | Input | value, onChangeText, errorMessage, ref | 空任务错误会显示出来，焦点会返回实际输入框。 | | ButtonGroup | buttons, selectedIndex, onPress | 受控索引会选择 15、25 或 45 分钟，并不代表时长本身。 | | Switch | value, onValueChange | 受控布尔值会改变休息说明。 | | Card | Card.Title, Card.Divider | 结构化界面表面会继承所选主题。 | | Button | title, onPress, type | 保存操作会验证本地状态；重置操作会恢复默认值。 | | SafeAreaProvider | Outer application provider | 必需的集成上下文；Web 上运行成功并不能证明原生设备的安全区域行为正确。 | ## React Native Elements 设计系统完整指南 实用指南，介绍如何为真实界面选择、应用和评审此系统。 完整指导、实现起点和源代码链接。 ## React Native Elements 设计系统运行环境与 Web 范围 ### 运行实际主题组件 > 此示例使用版本为 5.0.0 的 @rneui/themed 和 @rneui/base、版本为 19.2.0 的 React，以及版本为 0.21.3 的 React Native Web。浏览器构建会将 react-native 别名为 react-native-web，并优先选择 .web.js 模块，其次才是通用 JavaScript。这些是实际库组件在 Web 上的渲染结果，并非 HTML 仿制移动端截图的占位框。提供的构建文件包含相应的模块解析设置，因此独立代码也能复现该预览。 ### 区分 Web 与原生平台的证据 此组合是专注计划编辑器，而不是正在运行的计时器或通知管理器。按照集成要求，应用由 SafeAreaProvider 包裹，但此浏览器测试不会验证 iOS 或 Android 的安全区域内边距、原生键盘行为或设备通知权限。原生项目除了这些共享组件示例外，还需要进行平台构建和设备检查。 - Web 渲染使用 React Native Web。 - 计划仅保存在本地 React 状态中。 - 不会启动计时器、系统通知或后端保存操作。 ## React Native Elements 设计系统主题对象与颜色 ### 使用当前主题角色 createTheme 会将内置的浅色和深色颜色与任何显式覆盖项合并。此示例仅更改组件默认值和模式。useTheme 会将解析后的颜色提供给周围的 View 和 Text 元素，因此大标题、描述和面板都会随所选外观变化。在深色模式下，black 表示浅色前景角色，white 表示深色表面角色；若将这些名称视为字面颜色值，就会破坏主题效果。 ### 不要臆造通用排版比例 RNEUI 提供组件默认值和自定义钩子，其令牌模型与 CSS 设计系统并不相同。因此，参考内容将实际的 defaultSpacing 条目与示例中的 32px 标题、15px 正文和 8px 卡片圆角区分开来。这些尺寸是代码中可见的原始组合设置，不应被描述为强制性的 React Native Elements 品牌规范。 ## React Native Elements 设计系统输入验证与焦点 ### 明确控制任务文本 Input 接收 value 和 onChangeText 回调。点击保留操作时，会先去除文本两端的空白，再判断内容是否为空。如果为空，errorMessage 会显示明确的提示，并通过组件 ref 让输入框重新获得焦点。修改文本时会清除之前的错误，并使本地确认状态失效，避免已过时的保存提示对应已编辑的计划。 ### 同时使用标签和错误提示 可见的“专注任务”标签和 accessibilityLabel 都指向同一个控件。占位符用于提示输入内容，不能替代标签。验证仅在用户明确点击保留操作时触发，而不会随着每次按键执行。发生错误后，用户仍可保留草稿；同时，不会显示暗示服务器请求的异步保存动画，因为实际上并没有发出此类请求。 ## React Native Elements 设计系统受控选择 ### 将选中索引与时长分开处理 ButtonGroup 接收三个标签、selectedIndex 和 onPress。返回的索引会用于从原始的 [15, 25, 45] 分钟列表中选择时长；若直接将该索引当作分钟数使用，就会造成应用错误。预览中的大号数字摘要也根据相同的选中索引生成，确保分段控件与易读的计划内容保持一致。 ### 将休息选项设为真正的布尔值 Switch 接收 value 和 onValueChange，其无障碍名称应清楚描述此设置。摘要会在“短暂休息”和“不提醒休息”之间切换。这只是计划偏好设置：界面不会注册系统提醒或安排通知。保留操作的确认文案也会重申这一仅限本地的范围。 ## React Native Elements 设计系统状态保留与重置 ### 让主题与计划相互独立 切换外观时，会通过 updateTheme 更新为相反的模式。任务、所选时长、休息设置和本地确认均作为独立的应用状态保留，不受此次更新影响。原生组件会应用新主题，但不会重建计划。浏览器检查会在输入自定义任务后切换外观，以验证视觉模式不会意外导致数据重置。 ### 提供一个明确的恢复操作 “重置计划”会恢复示例任务、25 分钟时长和已启用的休息选项，清除验证错误并移除确认状态，同时保留所选外观。这样可以将内容重置与主题偏好分开，避免令人意外的整页重新加载。此示例没有持久化层，因此重新打开文档时会从初始示例开始。 ## React Native Elements 设计系统响应式布局 ### 调整双卡片布局 内容使用 useWindowDimensions，在宽度大于 700px 时采用行布局，在较窄的宽度下采用列布局。每张 Card 的外边距均为零，由组合设置中的 24px 间距控制对齐。宽度小于 500px 时，外侧内边距会缩小至 16px。两张卡片分别展示可编辑的计划和据此生成的摘要，而不是重复使用装饰性占位内容。 ### 检查两种主题下的组件默认样式 除了全局颜色之外，RNEUI 组件内部也可能应用各自的默认样式。例如，此示例中未选中的 ButtonGroup 分段仍采用其原生表面样式。如果产品需要不同的对比度或视觉密度，可以显式提供 buttonStyle 和 selectedButtonStyle，但应经过测试后再确定，而不应认为它们会由全局主题自动调整。 ## React Native Elements 设计系统完整浏览器配置 ### 配置 Web 解析与资源加载器 提供的 build.mjs 使用 esbuild，并为 JavaScript 依赖启用 JSX 解析、配置 react-native-web 别名、将 .web.js 设为优先扩展名，并为打包的 PNG 和 TTF 资源配置 data 加载器。包入口包含指向这些资源的导出项，即使可见组合中没有图标也是如此。因此，不能将此构建流程替换为在浏览器中直接导入未经处理的源文件。 ### 测试完整的本地交互流程 将提供的源文件保存为 rne.jsx，将 HTML 保存为 index.html，安装锁定版本的依赖，运行构建并启动目录服务。测试空任务、自定义任务、不同时长、休息开关、外观和重置操作。这样可以验证所提供的组合，但不会自动验证所有导出的 RNEUI 组件或所有原生平台。 1. 将提供的三个文件放在同一目录中。 2. 安装锁定版本的依赖并运行 node build.mjs。 3. 使用 index.html 提供生成后的构建文件。 4. 测试空白、编辑、主题切换和重置状态。 ## React Native Elements 设计系统组件示例 ### rne.jsx 完整的 provider、原生组件和应用状态。 ``` import React,{useState,useRef} from 'react'; import {createRoot} from 'react-dom/client'; import {View,Text,useWindowDimensions} from 'react-native'; import {ThemeProvider,createTheme,Button,ButtonGroup,Input,Switch,Card,Divider,useTheme} from '@rneui/themed'; import {SafeAreaProvider} from 'react-native-safe-area-context'; const theme=createTheme({mode:'light',components:{Button:{radius:6},Input:{containerStyle:{paddingHorizontal:0}}}}); function App(){const {theme,updateTheme}=useTheme();const {width}=useWindowDimensions();const [title,setTitle]=useState('Read a chapter'),[duration,setDuration]=useState(1),[breaks,setBreaks]=useState(true),[error,setError]=useState(false),[saved,setSaved]=useState('');const input=useRef(null);let c=theme.colors;function changed(){setSaved('')}function save(){if(!title.trim()){setError(true);input.current?.focus();return;}setError(false);setSaved(`${title.trim()} · ${[15,25,45][duration]} minutes · ${breaks?'with a short break':'no break reminder'}. Kept in this preview only.`)}return REACT NATIVE ELEMENTS · WEB STUDYMake room for one thing