React Native鸿蒙React Native内置组件康复系统Day3

2601_95075587

299人浏览 · 2026-01-27 22:07:35

2601_95075587 · 2026-01-27 22:07:35 发布

我们要做一个一个基于React Native的跨平台项目，在前几天的学习中，我已经集成了开源鸿蒙支持。现在我想做一个关于VR康复系统的小网站，可以根据用户需求调整户内（医院、家里...）、户外（公园、专业训练场所...）等环境。

在开发过程中，我选择了以下技术栈：

1. 网络请求库：使用 axios ，因为它是通用型HTTP请求库，支持拦截器、请求取消、响应转换等功能，且在OpenHarmony已兼容三方库清单中。
2. UI组件：使用React Native内置组件，确保跨平台兼容性，避免使用平台特定的依赖。
3. 数据管理：使用React的 useState 和 useEffect 钩子进行状态管理和副作用处理，实现数据的加载和刷新功能。

一、实现步骤

1、安装axios网络请求库

npm install axios --save

2、配置开源鸿蒙网络权限

要在AtomGitNews\harmony\entry\module.json5中添加网络权限

需要添加如下命令：

  "requestPermissions": [
      {
        "name": "ohos.permission.INTERNET"
      },
      {
        "name": "ohos.permission.GET_NETWORK_INFO"
      }
    ],

代码添加完成后，就完成了网络权限配置。

3、创建列表API请求服务和康复场景列表UI组件

因为要实现康复锻炼场景列表，我通过以下方式创建服务层数据结构：

    title: '家庭康复空间',
    description: '舒适的家庭环境，适合日常康复训练和轻度活动',
    type: 'indoor',
    location: '家里',
    imageUrl: 'https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=home%20rehabilitation%20space%20with%20exercise%20equipment%20in%20living%20room&image_size=landscape_16_9'

// 康复场景数据类型定义
export interface RehabilitationScene {

type: 'indoor' | 'outdoor' | 'custom';
  location: string;

// Mock康复场景数据
const mockScenes: RehabilitationScene[]

 title: '医院康复中心',
    description: '专业的医疗康复环境，配备专业康复设备和医护人员',
    type: 'indoor',
    location: '医院',
    imageUrl: 'https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=hospital%20rehabilitation%20center%20with%20equipment%20and%20professional%20staff&image_size=landscape_16_9'

 title: '公园康复步道',
    description: '户外自然环境，适合散步、轻度有氧运动和平衡训练',
    type: 'outdoor',
    location: '公园',
    imageUrl: 'https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=park%20rehabilitation%20trail%20with%20people%20walking%20and%20exercising%20in%20nature&image_size=landscape_16_9'

title: '专业训练中心',
    description: '专业的运动康复场所，配备先进的康复训练设备',
    type: 'outdoor',
    location: '专业训练场所',
    imageUrl: 'https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=professional%20rehabilitation%20training%20center%20with%20advanced%20equipment&image_size=landscape_16_9'
  },
  {
    id: '5',
    title: '个性化自定义场所',
    description: '根据个人需求定制的康复训练环境，灵活适应不同康复阶段',
    type: 'custom',
    location: '自定义',
    imageUrl: 'https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=customized%20rehabilitation%20space%20with%20personalized%20equipment%20and%20setup&image_size=landscape_16_9'

// 康复场景服务类
class SceneService {
  // 获取康复场景列表
  async getScenes(): Promise<RehabilitationScene[]

  // const response = await axios.get('https://api.example.com/scenes');

在真实环境中，这里会调用真实的API，并返回数据。

以上是实现康复的主要代码，分别用于构建场所、定义数据类型、mock康复数据和获取列表。

4、集成网络请求与UI组件

修改App.tsx文件，实现完整的康复场景列表功能（AtomGitNews\App.tsx中变更实现）。在App.tsx中需要使用Ionicons组件，要安装@expo/vector-icons依赖。

npm install @expo/vector-icons --save

二、效果演示

如图，可通过下拉刷新界面，该界面包括不同场景下的锻炼选项，提供了5个康复场景的mock数据，包括户内（医院、家里）、户外（专业训练场所、医院）和自定义类型。

三、问题与解决

1、在集成 @expo/vector-icons 库用于显示刷新图标时，构建开源鸿蒙版本应用失败，错误信息显示无法解析 expo-asset 模块。报错如下：

error Unable to resolve module expo-asset from D:\AtomGitRepo\AtomGitNews\node_modules\expo-font\build\FontLoader.js: expo-asset could not be found within the project or in these directories:
  node_modules
> 1 | import { Asset } from 'expo-asset';

我询问ai得到以下解答：