自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(24)
  • 收藏
  • 关注

原创 指标页与计划页优化

针对和进行了 UI 结构和交互逻辑的优化,目标是:✅ 保持风格一致性✅ 提高页面层级切换体验✅ 避免底部导航栏被遮挡✅ 丰富表单与数据展示的美感与实用性下文将详细记录每个页面的优化过程和关键代码变更。

2025-06-15 20:58:49 323

原创 首页轮播图实现

在一个功能完备的健康 App 中,首页承载着的双重任务。为了增强首页的吸引力与动感,为其加入了一个风格统一的轮播图组件,既美观又实用。

2025-06-15 16:24:56 367

原创 饮食建议界面优化

希望饮食建议页面具备以下视觉特征:统一的像素风背景,延续 App 视觉风格;所有输入框与按钮风格一致,增强沉浸感;加入图标与反馈,提升交互体验;结构清晰,操作步骤明确。

2025-06-15 14:20:37 500

原创 首页界面(DashboardScreen)的美化

首页的美化在代码层面改动不多,但视觉一致性和用户体验提升显著。这次调整验证了以下几点经验:保持视觉统一远比组件堆砌更重要;像素风并不意味着复杂的图形资源,关键在于边框、色彩、结构;所有功能块都应该有清晰的分组与语义样式。

2025-06-14 20:30:00 489

原创 “修改密码”、“个人信息查看”和“个人信息编辑”页面美化

我将介绍如何将“修改密码”、“个人信息查看”和“个人信息编辑”这三个页面统一改造为清新、像素风格的视觉样式。此次改动升了 UI 一致性,优化了用户体验,并为今后的风格统一打下基础。

2025-06-14 16:02:36 354

原创 登录+注册界面优化

优化。

2025-06-13 21:03:49 290

原创 主界面页面初步实现

Dashboard(主界面)向用户直观呈现:用户基本信息(用户名、年龄、身高、身体情况)今日锻炼与用药计划(含删除按钮)快捷跳转到相关编辑页面。

2025-06-12 08:00:00 367

原创 FoodAdvisorScreen 页面初步实现

是“个性化智能健康助理”App 中的重要功能页面,旨在为用户提供饮食建议服务。用户可以输入饮食相关的问题、上传饮食图片,并获取 AI 的综合分析与建议。聚焦如下功能:输入饮食相关文本描述;上传本地饮食照片;发送请求到 AI 分析模块;展示返回的膳食分析结果。

2025-06-11 20:00:00 470

原创 登录注册页面初步实现

允许用户通过手机号和密码登录,登录成功后跳转至主界面。:新用户通过填写姓名、手机号、密码进行注册,注册成功后返回登录页。

2025-06-11 13:59:43 592

原创 BodyMetricsScreen 页面初步实现

让用户每日填写并保存身体健康指标(如血糖、血压、体重)并进行本地存储,供后续分析与展示使用。,以日期为 key 进行唯一保存(即每天只记录一条,重复提交会覆盖)。用户输入后点击“提交”,会将当前填写的数据作为“当日数据”存入本地。使用当前日期作为 key,更新该 key 下的值。页面刷新后重新打开 → 自动回显已保存的当天数据。自动获取当天已有数据进行初始化显示(若有)。格式的字符串,作为当天数据的 key。如果再次提交,将覆盖当日原有记录。提取当天的指标数据并返回。,保存当前日期对应的数据。

2025-06-10 16:00:00 342

原创 ProfileFormScreen 页面初步实现

在。

2025-06-10 09:00:00 343

原创 项目主页 DashboardScreen 页面初步实现

📱 项目主页 DashboardScreen 页面实现详解。

2025-06-09 23:45:00 428

原创 ChatWithAIScreen 页面初步实现

if (!return (</View>))}<TextInputplaceholder="请输入问题..."/><Button title="发送" onPress={handleSend} /></View></View>

2025-06-09 20:15:29 218

原创 PlanFormScreen 页面初步实现

锻炼计划:起止日期 + 每天锻炼时长(单位:分钟)+ 内容描述用药计划:起止日期 + 用药剂量(字符串)+ 内容描述用户提交的计划会被存入本地中持久保存,并在首页(Dashboard)中展示当天应执行的计划。页面还支持计划删除操作,方便用户更新日程。

2025-06-09 20:01:51 454

原创 问题纠正+优化

但在 Dashboard 中初始读取展示时,引用了错误字段名,如 dose、time,导致数据显示为空或无法显示。初期在登录跳转逻辑中直接调用 navigation.navigate('DashboardScreen'),而未进入底部导航栈 MainTabs,导致跳转后界面无导航栏。本博客涉及的工作集中在结构一致性、数据状态刷新、UI合理布局这三方面,前后端分离开发的关键在于保持接口与结构对齐,而导航栏的核心在于路由嵌套正确与视图展示优化。问题三:“修改”、“编辑”、“已完成”等按钮位置不合理影响美观。

2025-06-03 01:16:22 425

原创 app的导航设计

关键词:React Navigation、前后端分离、页面状态管理、模块解耦、AsyncStorage。

2025-05-29 13:00:00 487

原创 使用 Android Studio 进行React Native App 开发过程

为了实现基于 React Native 开发的个性化智能健康助理 App基本信息填写身体指标录入锻炼/用药计划管理AI 问答与饮食建议虽然 React Native 提供跨平台开发能力,但 Android Studio 在 Android 端的调试、构建与测试过程中仍然扮演着不可替代的角色。以下是我在项目中结合 Android Studio 的完整记录。问题解决方式模拟器无法启动AVD 图像未安装完整,重新配置Vector Icons 不显示手动配置字体路径并运行。

2025-05-28 11:34:25 2462

原创 React Native 打造健康助理 App——从零开始搭建框架与模块规划

├── screens/ // 功能页面模块。│ ├── BodyMetricsScreen.tsx // 身体指标录入。│ ├── PlanFormScreen.tsx // 健康计划设置。│ ├── LoginScreen.tsx // 登录页。1. 首先通过命令创建项目:npx react-native init CSX。进入项目目录:cd CSX。

2025-05-13 23:06:39 157

原创 React Native 环境配置与开发

运行包含 JSX 的 React 组件,而 Node.js 原生环境无法解析 JSX 语法。本文将结合实战经验,完整解析 React Native 的环境配置、工具链原理,以及如何避开常见陷阱。:App 启动后显示 “Could not connect to development server”。:国内网络无法下载 Gradle 包。:未正确配置 Android 的。

2025-04-27 17:00:00 2308

原创 在React Native项目中解决常见错误

中添加以下内容:"devDependencies": { "@react-native-community/cli": "latest" }解决方案:使用新命令npx @react-native-community/cli init YourProjectName。(3)完成安装后,再次运行以下命令来启动开发服务器:npx react-native start。(1)验证当前的项目是否是 React Native 项目:进入要运行的目录下,执行dir。发现报如图所示的错误。

2025-04-27 11:30:00 1491

原创 构建一个标准的 React Native 项目2

在初始化一个标准的 React Native 项目之后,前端初步实现用户数据录入、输入用户的数据、图片上传等基本功能。│ ├️ 文件管理系统 (react-native-image-picker)│ ├️ 导航系统 (@react-navigation/native)│ ├️ 用户表单系统 (@react-native-paper)│ └️ 数据可视化 (victory-native)│ ├️ Context API(基础方案)├️ API服务封装 (axios)3. 构建基本的部分。

2025-04-26 13:00:00 216

原创 如何建一个标准的 React Native 项目

2. 在终端运行如下命令:npx react-native init YourProjectName。说明我们新建一个标准的 React Native 项目已经成功,我们可以在此基础上实现其余功能。(4)开发环境预配置(Metro打包器、Babel转换器等)(3)原生依赖集成(iOS/Android 目录自动生成)(2)版本兼容性管理(自动匹配当前稳定版本)(1)自动化项目脚手架搭建。说明我们已经新建成功了。

2025-04-25 19:05:46 586

原创 React Native架构学习

React Native就像一位“双语翻译官”,允许用一份JavaScript代码生成两个平台的应用,同时复用Web开发经验。2. 混合渲染机制:基础组件(如按钮、文本)直接映射为iOS/Android原生控件,而非WebView渲染。Web的→ React Native的(可点击区域)Web的 → React Native的(显示图片)<Text style={{ color: 'white' }}>点击这里</Text>常见组件对照表:Web的→ React Native的(用于布局容器)

2025-04-17 23:06:27 404

原创 WebSocket技术学习

(3)握手完成,连接升级:一旦握手成功,客户端和服务器的 TCP 连接会保持打开状态,后续所有通信都基于 WebSocket 协议,不再是 HTTP。WebSocket 的连接建立基于 HTTP 协议,但会通过「协议升级」将普通的 HTTP 连接转换为 WebSocket 连接。(2)服务器响应握手:如果服务器支持 WebSocket,会返回一个 HTTP 101 状态码,表示协议切换成功。(1)客户端发起握手请求:客户端(如浏览器)发送一个 HTTP 请求,要求升级到 WebSocket 协议。

2025-04-14 23:02:20 417

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除