一、项目功能与实现简介

项目概述

本次开发基于 React Native 和 OpenHarmony 平台，实现了一个医疗应用的底部选项卡导航功能，包含四个核心页面：

1. 首页（AI问诊） ：实现了症状输入、AI诊断结果展示等功能
2. 问诊历史 ：展示用户的历史问诊记录，支持下拉刷新
3. 我的中心 ：展示用户信息和健康统计数据
4. 设置 ：提供应用配置选项和关于信息

核心技术实现

1. 底部选项卡导航 ：使用自定义 BottomTabBar 组件，结合 useState 管理选中状态
2. 页面状态持久化 ：使用 useRef 存储页面引用，确保选项卡切换时页面状态不丢失
3. 多终端屏幕适配 ：使用 Dimensions API 动态获取屏幕尺寸，实现响应式布局
4. 异常处理 ：所有页面都实现了加载状态、错误状态和空数据状态的处理

二、开发易见问题与解决方案

1. 函数命名语法错误

问题 ：在实现 AI 问诊页面时，函数名中包含空格，导致语法错误。

// 错误代码
const handleAI Consultation = async () => {
  // 函数实现
};

解决方法 ：移除函数名中的空格，使用驼峰命名法。

// 正确代码
const handleAIConsultation = async () => {
  // 函数实现
};

踩坑原因 ：在编写代码时，没有注意到函数名不能包含空格，导致语法错误。

预防措施 ：使用代码编辑器的语法高亮和自动提示功能，及时发现语法错误。

2. 页面组件引用传递错误

问题 ：在 AppRoot.tsx 中，添加新页面时忘记更新 useRef 中的页面引用类型定义。

解决方法 ：确保 useRef 中的页面引用类型与实际页面组件对应。

// 正确代码
const pageRefs = useRef({
  home: null,
  data: null,
  my: null,
  settings: null,
});

踩坑原因 ：添加新页面时，只修改了 JSX 部分，忘记更新 useRef 中的类型定义，可能导致类型错误。

预防措施 ：添加新页面时，确保同步更新所有相关的类型定义和引用。

3. 页面状态管理问题

问题 ：底部选项卡切换时，页面状态（如输入内容、滚动位置）丢失。

解决方法 ：使用 useRef 存储页面引用，结合绝对定位实现页面状态持久化。

// 页面渲染
{tabs.map(tab => (
  <View
    key={tab.key}
    style={[
      styles.pageContainer,
      activeKey === tab.key ? styles.pageVisible : styles.pageHidden
    ]}
  >
    {tab.key === 'home' && <HomeScreen ref={ref => pageRefs.current.home = ref} />}
    {tab.key === 'data' && <DataScreen ref={ref => pageRefs.current.data = ref} />}
    {tab.key === 'my' && <MyCenterScreen ref={ref => pageRefs.current.my = ref} />}
    {tab.key === 'settings' && <SettingsScreen ref={ref => pageRefs.current.settings = ref} />}
  </View>
))}

踩坑原因 ：默认情况下，React Native 会在组件不可见时卸载组件，导致状态丢失。

预防措施 ：使用 useRef 存储页面引用，结合绝对定位和 zIndex 控制页面显示/隐藏，避免组件卸载。

4. 异常处理不完整

问题 ：页面加载过程中，没有处理网络请求错误或空数据状态，导致用户体验差。

解决方法 ：为每个页面添加完整的异常处理，包括加载状态、错误状态和空数据状态。

if (loading) {
  return (
    <View style={styles.container}>
      <ActivityIndicator size="large" color="#007AFF" />
      <Text style={styles.loadingText}>加载中...</Text>
    </View>
  );
}

if (error) {
  return (
    <View style={styles.container}>
      <Text style={styles.errorText}>{error}</Text>
      <Pressable style={styles.retryButton} onPress={() => fetchData()}>
        <Text style={styles.retryButtonText}>重试</Text>
      </Pressable>
    </View>
  );
}

if (data.length === 0) {
  return (
    <View style={styles.container}>
      <Text style={styles.emptyText}>暂无数据</Text>
    </View>
  );
}

踩坑原因 ：开发过程中只关注正常流程，忽略了异常情况的处理。

预防措施 ：在开发每个页面时，都应考虑加载状态、错误状态和空数据状态的处理，确保用户体验的完整性。

最终效果：完成界面布局框架

三、学习思考与总结

1. 底部选项卡设计原则

1. 简洁明了 ：选项卡数量不宜过多，一般控制在 3-5 个之间，确保用户能够快速找到所需功能
2. 视觉一致性 ：选项卡的视觉设计应保持一致，包括图标、文字、颜色等
3. 状态清晰 ：选中状态和未选中状态应有明显的视觉区分，便于用户识别当前位置

2. 性能优化策略

1. 页面状态持久化 ：使用 useRef 存储页面引用，避免页面重新渲染
2. 懒加载 ：对于非首屏页面，可延迟加载部分内容，减少初始渲染时间
3. 资源优化 ：优化图片和其他资源的加载方式，减少应用体积和加载时间
4. 组件拆分 ：将复杂页面拆分为多个小型组件，提高渲染性能

现有问题：AI问诊界面易发生闪退，问诊历史的诊断详情无法查看，将在未来解决

未来拓展：首页AI问诊未来可调用API接入外部模型，优化UI界面，设置登录界面

欢迎加入开源鸿蒙跨平台社区
https://openharmonycrossplatform.csdn.net