- 博客(30)
- 收藏
- 关注
RSS订阅原创 rn_for_openharmony常用组件_FloatingButton浮动按钮
摘要 本文介绍了一个浮动操作按钮(FAB)组件的实现，该组件具有以下特性： 支持自定义图标、颜色和大小 提供三种定位方式：右下角(默认)、左下角和底部居中 包含禁用状态处理 采用绝对定位悬浮在内容之上 根据尺寸自动计算圆角半径和图标大小 支持自定义样式覆盖 组件通过60行简洁代码实现，包含了完整的类型定义和默认值设置，遵循Material Design设计规范，适合作为React Native应用中的主要操作按钮使用。
2026-01-10 21:45:27
529
原创 rn_for_openharmony常用组件_Breadcrumb面包屑
面包屑导航组件实现解析 本文介绍了一个React Native面包屑导航组件的实现。该组件通过70行代码实现了以下核心功能： 基本结构：支持显示层级路径（如"首页 > 商品分类 > 手机数码"） 交互功能：可点击项支持跳转回调 路径折叠：当层级过深时自动折叠中间项显示为"..." 样式定制：支持自定义分隔符、颜色和整体样式 关键实现细节包括： 使用flex布局实现水平排列和自动换行 通过maxItems参数控制显示层级数量 最后一项使用特殊样式标识当前页面
2026-01-10 21:44:07
555
原创 rn_for_openharmony常用组件_List列表
本文介绍了React Native列表组件的设计思路，采用List和ListItem两个组件分工协作的模式。ListItem负责单个列表项的渲染，支持标题、副标题、左右图标/元素、点击交互等功能；List作为容器组件，提供卡片式、嵌入式等不同布局样式。这种拆分设计提高了组件的灵活性和复用性，开发者可以单独使用ListItem，也可以组合使用List来构建完整列表。文章详细解析了两个组件的属性设计、默认值和渲染结构，展示了如何用90行代码实现一个功能完善的列表组件库。
2026-01-09 23:04:48
506
原创 rn_for_openharmony常用组件_Tabs选项卡
Tabs组件摘要 实现了一个功能完善的React Native选项卡组件，支持多种交互和样式配置： 数据结构： 使用TabItem接口定义每个选项卡，包含key、label、icon、badge和content等属性 采用key而非index作为唯一标识，避免顺序变化导致的问题 核心功能： 支持受控(activeKey)和非受控(internalKey)两种状态管理 提供onChange回调实现外部控制 水平滚动处理标签过多情况 样式定制： 三种视觉变体：线条式(line)、药丸式(pills)、封闭式(e
2026-01-09 23:03:27
453
原创 rn_for_openharmony常用组件_Accordion手风琴
这篇文章介绍了React Native手风琴(Accordion)组件的实现。该组件支持三种样式变体(default/bordered/separated)和单选/多选两种模式，可用于FAQ等需要展开/收起内容的场景。文章详细解析了组件的数据结构设计(包含key、title、content、icon等字段)，参数配置(items、allowMultiple等)，以及状态管理机制(使用数组存储展开项的key)。该组件90行代码实现，具有高度可定制性，内容区域支持插入任意React元素，能够满足多种交互需求。
2026-01-08 22:45:32
731
原创 rn_for_openharmony常用组件_Timeline时间线
摘要 该代码实现了一个React Native时间线组件Timeline，用于展示按时间顺序排列的事件节点。组件支持三种布局模式（默认左对齐、右对齐、交替显示），每个节点包含标题、描述、时间和自定义图标。核心设计包括： 数据结构：TimelineItem接口定义节点属性（标题必选，描述/时间/图标/颜色可选） 组件属性：支持节点数组、三种布局模式、线条颜色自定义和样式扩展 实现方式：通过map遍历节点数组，动态计算布局方向、圆点颜色和连接线显示 样式控制：使用StyleSheet创建样式对象，实现灵活的节点
2026-01-08 22:44:06
985
原创 rn_for_openharmony常用组件_Chip纸片
本文介绍了一个React Native的Chip组件实现。Chip是一种交互式UI元素，相比Tag标签更强调用户交互，支持点击、选择和删除操作。该组件提供了丰富的属性配置，包括11个可选参数：label（必填）、selected状态、onPress/onDelete回调、color主题色、size尺寸、variant填充样式、avatar/icon装饰元素、disabled禁用状态以及自定义样式style。源码通过动态计算颜色和尺寸映射，实现了灵活的外观控制，支持三种尺寸（sm/md/lg）和两种变体（fi
2026-01-07 20:05:47
731
原创 rn_for_openharmony常用组件_Tooltip提示
Tooltip组件实现摘要 本文介绍了一个用于移动端开发的Tooltip组件实现方案。该组件通过长按触发，解决了移动端缺乏鼠标悬停提示的问题。主要实现要点包括： 使用TouchableOpacity监听长按事件，通过useState管理显示状态 支持四种定位方式(top/bottom/left/right)，通过getPositionStyle函数动态计算位置样式 提供dark/light两种视觉主题，适配不同背景需求 采用绝对定位布局，确保提示气泡不会影响原有界面结构 完整代码仅60行，包含状态管理、样式
2026-01-07 20:04:39
705
原创 rn_for_openharmony常用组件_Divider分割线
React Native分割线组件设计与实现 本文介绍了一个功能完善的React Native分割线组件，解决了实际项目中常见的分割线需求。该组件支持： 水平和垂直两种方向 实线、虚线和点线三种样式 自定义线条粗细和颜色 中间显示文字功能 文字位置可配置（左/中/右） 统一的间距控制 组件通过巧妙使用borderStyle实现虚线效果，并采用主题系统保证样式一致性。70多行代码封装了8个配置属性，满足各种场景下的分割线需求，提升了开发效率和UI一致性。
2026-01-06 21:29:57
671
原创 rn_for_openharmony常用组件_Empty空状态
Empty 组件解析：如何优雅处理无数据状态 摘要 Empty组件是一个处理空状态的UI组件，它通过50行代码实现了以下核心功能： 基本结构：包含图标、标题、描述文本和操作按钮 三种尺寸：提供compact/default/large三种变体，适应不同场景 灵活配置：所有属性可选，零配置即可使用默认样式 用户引导：通过描述文本和操作按钮引导用户采取行动 关键设计亮点： 使用emoji作为默认图标，避免引入图标库 通过映射表管理尺寸配置，便于扩展 与主题系统集成，保持UI一致性 复用Button组件，减少重复
2026-01-06 21:28:54
693
原创 rn_for_openharmony常用组件_Skeleton骨架屏
摘要： 本文探讨了骨架屏在提升用户体验中的重要作用，并分析了开源项目中的骨架屏实现。骨架屏通过预先展示页面结构，缓解用户等待时的焦虑感，研究表明可缩短感知等待时间10%-20%。文章重点解析了Skeleton.tsx源码，包含两个组件：Skeleton支持多种形状和动画效果，默认呈现文本行样式；SkeletonGroup则提供批量生成功能，支持自动生成带间距的骨架组或自定义内容。实现细节包括脉冲动画、形状适配和性能优化等，展现了如何通过简单设计显著改善交互体验。
2026-01-05 22:43:07
766
原创 用 React Native 打造 OpenHarmony 结果页组件：给用户一个明确的交代
本文介绍了一个用于OpenHarmony的React Native Result组件，该组件旨在优化用户操作后的反馈体验。Result组件不仅显示简单的"成功"或"失败"状态，而是提供完整的操作结果信息，包括状态图标、标题、详细说明、操作按钮和额外内容。文章详细解析了组件的设计思路和代码实现： 组件设计理念：借鉴银行服务场景，提供完整的操作反馈（状态、标题、说明、后续引导） 技术实现： 定义明确的Props接口，区分必选和可选参数 使用状态映射机制将状态关联到对应的图
2026-01-05 22:42:11
767
原创 React Native for OpenHarmony Modal 模态框组件：阻断式交互的设计与实现
Modal组件是移动端常见的"阻断式"交互组件，通过半透明遮罩强制用户处理当前任务。文章详细介绍了基于React Native的Modal实现方案，包括：1. 组件分类（非阻断式、半阻断式、阻断式）；2. 核心文件结构；3. 关键实现细节，如动画逻辑（淡入+滑入效果）、尺寸映射（sm/md/lg/full）和位置配置（居中/底部）；4. 接口设计（visible控制、回调函数、标题/内容/底部配置等）。该组件支持灵活的定制能力，适用于确认对话框、表单提交等多种场景。
2026-01-04 21:39:12
788
原创 React Native for OpenHarmony Toast 轻提示组件：自动消失的操作反馈
本文介绍了移动端Toast组件的实现细节，包括其轻量级特性、文件组织结构、核心功能模块和动画实现原理。Toast作为临时提示组件，通过Animated模块实现平滑的滑入滑出效果，支持自定义位置、时长和样式，并内置了语义化类型与图标映射。文章重点解析了动画控制逻辑（使用useEffect监听visible变化）、定时器管理（自动隐藏机制）以及性能优化（原生驱动动画），展示了如何构建一个不干扰用户操作又能有效传递信息的Toast组件。
2026-01-04 21:37:50
700
原创 React Native for OpenHarmony Alert 警告组件：语义化提示的设计与实现
文章摘要： Alert组件是一种平衡醒目性与干扰性的非阻断式提示控件，用于向用户传递重要但不强制响应的信息。作者基于开源项目实现了一个灵活可配置的Alert组件，支持多种语义类型（success/warning等）、三种视觉变体（filled/outlined/soft）以及标题、图标、关闭按钮等扩展功能。组件通过解构颜色主题实现样式统一，采用emoji作为默认图标简化实现，并精心设计了不同变体的颜色透明度组合。该实现既保证了视觉层次分明，又能通过props灵活适配不同使用场景，是React Native组
2026-01-03 21:59:49
746
原创 React Native for OpenHarmony Spinner 加载组件：三种动画形态的实现与选择
React Native 加载指示器实现解析 这篇文章详细讲解了 React Native 加载指示器(Spinner)的实现方案。项目开源地址为：https://atomgit.com/nutpi/rn_for_openharmony_element 文章分析了两种加载场景：不确定时长等待(使用Spinner)和确定进度等待(使用Progress)。重点解析了Spinner组件的实现细节： 组件设计采用简洁接口：支持颜色、尺寸、动画类型等配置 动画实现采用React Native的Animated API
2026-01-03 21:58:51
560
原创 React Native for OpenHarmony Progress 进度条：一套实现覆盖线性与环形
文章摘要 本文详细解析了开源项目中的进度条组件实现，重点介绍了线性进度条和环形进度条的绘制原理。作者通过真实代码展示了如何将value/max转换为百分比，并详细说明了尺寸映射规则。文章强调进度条的核心价值在于让等待变得可预期，建议开发者区分确定性进度和近似性进度的使用场景。组件设计上采用主题类型约束和预设尺寸档位，确保UI一致性。实现细节包括：线性进度条的track/fill分层结构、环形进度条的SVG绘制方式，以及百分比计算的边界处理。最后还介绍了项目中的组件接入链路和演示示例的组织方式。
2026-01-02 17:48:32
920
原创 从零打造 React Native for OpenHarmony 搜索栏组件
本文分享了在OpenHarmony项目中实现搜索栏组件的经验，重点介绍了核心功能、Props设计、状态管理、尺寸配置等关键实现细节。搜索栏需要具备输入文字、显示图标、清除内容、提交搜索等基本功能，通过受控/非受控兼容设计使组件更灵活。文章详细讲解了状态管理、圆角计算、输入处理等具体实现方法，并强调了将视觉状态与业务状态分离的重要性。该组件支持多种变体和尺寸配置，可满足不同场景需求。
2026-01-02 17:47:15
1036
原创 React Native for OpenHarmony 评分组件开发手记
本文介绍了一个基于React Native开发的OpenHarmony评分组件实现方案。该组件具备以下核心功能： 基础功能： 支持显示当前评分值（1-5星） 支持用户交互点击评分 提供只读模式展示 扩展特性： 可自定义星星数量（默认5颗） 支持替换评分图标（如爱心、拇指等） 提供三种预设尺寸（sm/md/lg） 可配置填充色和未选中色 可选显示具体分数值 实现要点： 使用TouchableOpacity处理点击事件 通过数组映射渲染星星图标 采用防御性编程处理边界情况 提供完善的样式配置选项 该组件设计简洁
2026-01-01 19:25:01
958
原创 React Native for OpenHarmony Stepper 步进器：精确控制数量的利器
本文介绍了开源项目中的Stepper组件实现，重点解析了其核心功能与使用方式。Stepper是一个专注数字增减的表单组件，通过min/max/step参数严格控制数值范围。文章从项目结构入手，定位了组件实现(Stepper.tsx)和示例页面(StepperDemo.tsx)的位置，对比了Stepper与Slider的使用场景差异。详细剖析了组件的三层Props设计：数据回调、规则控制和外观样式，特别强调了边界处理的严谨性(双重保护机制)和三种变体(default/rounded/outlined)的样式实
2026-01-01 19:23:45
717
原创 React Native for OpenHarmony Slider 滑块组件：让用户用手指选择数值
文章摘要： 本文介绍了Slider滑块组件的实现原理和设计思路。该组件由轨道、填充和滑块三部分组成，用于在指定范围内选择数值。文章详细讲解了核心功能：1) 数值与位置的百分比转换公式；2) 尺寸配置系统(sm/md/lg)；3) 轨道、填充和滑块的渲染方法；4) 滑块定位的数学计算；5) 可选的数值显示功能。组件采用受控设计，支持自定义范围、步长、颜色和尺寸，适用于音量调节、亮度控制等多种场景。实现上结合了绝对定位、圆角处理和阴影效果，确保交互直观且视觉效果专业。
2025-12-31 13:52:39
986
原创 React Native for OpenHarmony 单选框组件：从设计思路到代码落地
本文详细介绍了单选框（Radio）组件的封装设计过程，重点阐述了其与复选框（Checkbox）的关键差异。单选框必须成组使用，因此设计采用集中管理状态的思路，通过value+onChange+options接口实现整组控制。文章从接口设计、排列方向、尺寸配置、视觉渲染等多个维度进行解析，特别强调了单选框特有的成组特性、垂直/水平布局选择、内外圆环的尺寸比例关系等设计要点。通过对比Checkbox的实现方式，展示了Radio组件在状态管理和使用便捷性上的优势。
2025-12-31 13:51:36
690
原创 从产品需求到代码实现：React Native for OpenHarmony Checkbox 组件全解析
Checkbox组件封装实践 本文介绍了React Native复选框组件的封装过程，针对商品筛选页面的需求进行了组件设计。组件支持多种状态和样式： 核心功能：支持选中/未选中状态切换，采用受控组件模式管理状态 特殊状态：支持半选(indeterminate)和禁用(disabled)状态 样式定制：提供三种尺寸(sm/md/lg)和多种颜色选项 交互优化：扩大点击区域至整个组件，包含标签文字 组件设计遵循以下原则： 视觉状态清晰区分（激活/未激活） 保持与HTML标准一致的命名(indeterminate
2025-12-30 15:42:42
856
原创 React Native for OpenHarmony 实战：Switch 开关组件的实现思路
本文介绍了如何为React Native封装一个自定义开关组件。文章首先分析了原生Switch组件的局限性，如样式不统一、功能有限等问题，进而提出封装自定义开关的必要性。作者从交互本质出发，将开关视为二元选择器，详细阐述了接口设计、尺寸配置、滑块位置计算、轨道和滑块渲染、点击事件处理等核心实现细节。文章重点讲解了如何通过精确的尺寸比例和位置计算实现美观的开关效果，包括轨道宽高比设计、滑块间隙处理、状态颜色变化等。此外，还介绍了标签处理、禁用状态等增强功能的实现方式。全文以技术实现为主线，辅以设计思考，为开发
2025-12-30 15:41:42
735
原创 React Native for OpenHarmony 实战：Tag 标签组件开发手记
本文介绍了如何封装一个通用的Tag组件，分析了标签与徽章的区别，并详细阐述了Tag组件的设计思路。文章从需求场景出发，列举了展示型、筛选型、可删除型等不同标签类型，并给出了完整的接口设计，包括颜色、样式、尺寸等参数配置。重点讲解了三种视觉样式(solid/outline/soft)的实现细节和尺寸规范，特别是soft样式通过透明度实现柔和效果的技巧。最后说明了标签内容渲染的逻辑结构和点击事件处理机制，确保交互体验的一致性。该组件设计兼顾了灵活性和易用性，适用于多种业务场景。
2025-12-29 21:33:08
684
1
原创 React Native for OpenHarmony 实战：Badge 徽章组件的设计与实现
本文介绍了如何封装一个实用的Badge徽章组件。作者首先分析了实际项目中徽章组件的常见需求，包括数字显示、上限处理、小红点模式、颜色区分和独立使用等。然后详细讲解了组件的接口设计、尺寸配置、显示逻辑处理、样式实现和定位技术等关键实现细节。通过合理的封装，该组件可以灵活应对各种徽章场景，如消息数量提示、未读标记等，只需一行代码即可调用。文章最后提供了完整的组件代码实现，展示了如何将上述设计思路转化为可复用的React Native组件。
2025-12-29 21:32:01
1015
原创 React Native for OpenHarmony 实战：封装多功能的 Avatar 头像组件
本文详细介绍了如何封装一个功能完善的Avatar头像组件，主要涵盖六大使用场景：显示用户头像图片、用户名首字母、不同尺寸和形状、状态徽章以及头像组。通过分析需求设计了组件接口，包括source、name、size、shape等属性，并实现了尺寸计算、首字母提取、形状处理等核心逻辑。组件采用条件渲染策略，支持图片和文字两种显示模式，同时通过外层相对定位实现徽章功能。该设计兼顾了灵活性和易用性，适用于各种应用场景的头像展示需求。
2025-12-28 22:21:20
542
原创 React Native for OpenHarmony 实战：打造灵活易用的 Input 输入框组件
本文介绍了如何从零开始封装一个功能完善的React Native输入框组件。主要内容包括： 功能需求分析：基础输入功能、标签提示、错误状态、多种视觉风格和图标支持 类型接口设计：继承TextInputProps，扩展label、error、hint等属性 核心实现要点： 焦点状态管理 三种尺寸配置(sm/md/lg) 三种视觉变体(outlined/filled/underlined) 边框颜色优先级：错误>焦点>默认 组件设计考虑了移动端最佳实践，如44px最小点击区域、高清屏边框优化等。通过
2025-12-28 22:20:34
976
原创 React Native for OpenHarmony 实战：构建通用的 Card 卡片容器组件
本文详细介绍了如何封装一个灵活易用的Card组件，分析了四种常见使用场景（内容展示、可点击列表项、带操作按钮、不同视觉层级）。通过定义清晰的组件接口（支持标题、副标题、多种样式变体和点击事件），实现了动态样式逻辑和合理的头部布局。组件采用flex布局和条件渲染优化性能，提供elevated、outlined、filled三种视觉风格，满足不同层级内容的展示需求，最终实现了一个高度可定制且符合设计规范的卡片组件。
2025-12-26 20:08:58
951
原创 React Native for OpenHarmony 实战：封装一个高复用的 Button 按钮组件
本文介绍了一个跨平台Button组件的封装实现。通过TypeScript接口定义了按钮的多种样式(variant)、颜色(color)、尺寸(size)和状态(disabled/loading)等属性。组件采用语义化命名和主题配置，确保UI风格统一，便于维护。核心逻辑包括尺寸计算、动态样式生成和状态处理，支持solid/outline/ghost三种视觉风格。该组件设计考虑了移动端交互规范，如最小点击区域和视觉权重分配，可直接用于生产环境。开源地址：https://atomgit.com/nutpi/rn_
2025-12-26 20:05:03
715
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人