# laundry

**Repository Path**: chenbool/laundry

## Basic Information

- **Project Name**: laundry
- **Description**: No description available
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-09-19
- **Last Updated**: 2025-09-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 洗衣服务应用 (Laundry Service App)

这是一个基于 React Native 和 Expo 开发的洗衣服务应用程序，具有位置服务、图片轮播、服务选择等功能。

## 项目概述

该应用程序允许用户查看附近的洗衣服务，浏览不同的洗衣选项，并选择需要清洗的衣物类型。应用使用设备的位置服务来显示用户当前的位置信息。

## 技术栈

- **React Native**: 用于构建跨平台移动应用的框架
- **Expo**: React Native 的开发平台，提供了一系列原生 API
- **React Navigation**: 用于在应用中导航
- **react-native-reanimated-carousel**: 用于实现图片轮播功能
- **expo-location**: 用于获取设备位置信息
- **@expo/vector-icons**: 用于显示图标

## 项目结构

```
.
├── App.js                  # 应用程序根组件
├── app.json               # Expo 应用配置文件
├── index.js               # 应用程序入口文件
├── package.json           # 项目依赖和脚本配置
├── readme.md              # 项目说明文档
├── assets/                # 静态资源文件（图标、启动画面等）
│   ├── adaptive-icon.png
│   ├── favicon.png
│   ├── icon.png
│   └── splash-icon.png
├── components/            # 可复用的 UI 组件
│   ├── Carousels.js       # 图片轮播组件
│   ├── DressItem.js       # 服装项目组件
│   └── Services.js        # 服务列表组件
├── screens/               # 应用页面组件
│   └── HomeScreen.js      # 主屏幕组件
└── package-lock.json      # 依赖版本锁定文件
```

## 功能特性

### 1. 位置服务
- 自动获取用户当前位置
- 显示用户所在地区的详细地址信息
- 位置权限请求和管理

### 2. 图片轮播
- 自动播放的图片轮播图
- 支持手势滑动切换
- 响应式设计，适配不同屏幕尺寸

### 3. 服务展示
- 水平滚动的服务列表
- 多种洗衣服务选项展示
- 直观的图标和文字说明

### 4. 服装选择
- 服装项目列表展示
- 每个项目包含图片、名称和价格
- 添加到购物车功能

## 组件详解

### HomeScreen 组件
主屏幕组件，整合了所有核心功能：
- 位置信息显示
- 搜索功能
- 图片轮播
- 服务列表
- 服装项目列表

### Carousels 组件
图片轮播组件，使用 `react-native-reanimated-carousel` 实现：
- 自动播放功能
- 手势滑动支持
- 响应式设计

### Services 组件
服务列表组件，水平展示洗衣服务选项：
- 水平滚动视图
- 服务图标和名称展示

### DressItem 组件
单个服装项目组件：
- 服装图片展示
- 名称和价格显示
- 添加到购物车按钮

## 安装和运行

### 环境要求
- Node.js (推荐 LTS 版本)
- Expo CLI 或使用 npx

### 安装步骤
1. 克隆项目到本地
2. 进入项目目录
3. 安装依赖：
   ```bash
   npm install
   # 或
   yarn install
   ```

### 运行项目
- 在开发模式下启动项目：
  ```bash
  npm start
  # 或
  yarn start
  ```
- 在 Android 设备上运行：
  ```bash
  npm run android
  # 或
  yarn android
  ```
- 在 iOS 设备上运行：
  ```bash
  npm run ios
  # 或
  yarn ios
  ```
- 在 Web 浏览器中运行：
  ```bash
  npm run web
  # 或
  yarn web
  ```

## 依赖库安装命令

### 安全区域处理
官方推荐替代方案，比如 react-native-safe-area-context库提供的 SafeAreaView 或 useSafeAreaInsets。

```bash
npm install react-native-safe-area-context
```

### 位置服务
位置服务使用 expo-location 库：

```bash
npx expo install expo-location
```

相关文档：[Expo Location Documentation](https://docs.expo.dev/versions/latest/sdk/location/)

### 图标库
使用 @expo/vector-icons 提供图标支持：

```bash
npx expo install @expo/vector-icons
```

### 图片轮播
图片轮播功能依赖以下库：

```bash
npx expo install react-native-reanimated-carousel
npx expo install react-native-reanimated react-native-gesture-handler
```

相关资源：
- [React Native Reanimated Carousel 官网](https://rn-carousel.dev/)
- [NPM 包详情](https://www.npmjs.com/package/react-native-reanimated-carousel)

### Redux 状态管理（可选）
如需添加 Redux 状态管理功能，可安装以下依赖：

```bash
npm install @reduxjs/toolkit
npm install react-redux
```

Redux Toolkit 文档：[Redux Toolkit Getting Started](https://redux-toolkit.js.org/introduction/getting-started)

## 依赖库说明

### 核心依赖
- `expo`: Expo SDK，提供原生功能访问
- `react`: React 核心库
- `react-native`: React Native 框架

### 位置服务
- `expo-location`: 获取设备位置信息
- `react-native-safe-area-context`: 处理设备安全区域

### UI 组件
- `@expo/vector-icons`: 图标库
- `react-native-reanimated-carousel`: 图片轮播组件
- `react-native-reanimated`: 动画库
- `react-native-gesture-handler`: 手势处理库

## 项目配置

### app.json 配置
- 应用名称、版本等基本信息
- 设备方向设置
- 图标和启动画面配置
- 位置权限配置

### 权限说明
应用需要以下权限：
- 位置权限：用于获取用户当前位置信息

## 开发说明

### 代码规范
- 使用函数式组件和 Hooks
- 组件文件使用 PascalCase 命名
- 组件内注释详细说明功能和参数

### 样式管理
- 使用 StyleSheet.create 创建样式
- 样式与组件逻辑分离
- 使用内联样式处理动态样式

## 未来扩展

### 可能的改进方向
1. 添加用户认证系统
2. 实现购物车和订单功能
3. 集成支付系统
4. 添加更多洗衣服务选项
5. 实现服务预约功能
6. 添加用户评价和反馈系统

## 常见问题

### 位置服务问题
如果无法获取位置信息，请检查：
1. 设备位置服务是否开启
2. 应用是否获得了位置权限
3. 是否在模拟器中运行（可能需要手动设置位置）

### 依赖安装问题
如果遇到依赖安装问题：
1. 删除 node_modules 文件夹
2. 删除 package-lock.json 或 yarn.lock
3. 重新运行安装命令

## 贡献指南

欢迎提交 Issue 和 Pull Request 来改进这个项目。

## 许可证

该项目基于 MIT 许可证开源。