# 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**: 2026-09-05

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 洗衣服务应用 Laundry Service App

> 基于 **React Native + Expo** 的跨平台洗衣服务移动应用示例，集成定位、轮播、服务分类与服装列表，一套代码可运行于 Android / iOS / Web。

---

## 目录

- [项目介绍](#项目介绍)
- [应用资源预览](#应用资源预览)
- [技术栈](#技术栈)
- [项目结构](#项目结构)
- [小白部署教程](#小白部署教程)
- [使用教程](#使用教程)
- [功能特性](#功能特性)
- [组件详解](#组件详解)
- [FAQ 排错](#faq-排错)
- [未来扩展](#未来扩展)
- [贡献指南](#贡献指南)
- [许可证](#许可证)

---

## 项目介绍

这是一个面向移动端的洗衣服务预约类应用脚手架。打开 App 后，用户可以：

1. **自动定位**：调用设备 GPS 获取当前位置，并通过反向地理编码展示"省-市-区-街道门牌号"格式的地址。
2. **浏览运营位**：首页顶部自动轮播活动图片，3 秒切换，支持手势滑动。
3. **查看服务分类**：横向滚动的服务入口（Washing / Laundry / Wash & Iron / Cleaning）。
4. **选择服装项目**：以列表形式展示可清洗的服装（T-shirt、dresses、shorts、Sleeveless 等），含图片、名称、价格与"添加"按钮。

本项目适合作为 React Native + Expo 入门模板，或在此基础上二次开发为完整的预约/下单/支付流程。

---

## 应用资源预览

以下为 `assets/` 目录中的应用图标与启动画面资源（2 列等宽排版）：

| 图标 icon.png | 自适应图标 adaptive-icon.png |
| :---: | :---: |
| ![应用图标](assets/icon.png) | ![自适应图标](assets/adaptive-icon.png) |

| 启动画面 splash-icon.png | 网页 favicon.png |
| :---: | :---: |
| ![启动画面](assets/splash-icon.png) | ![网页图标](assets/favicon.png) |

> 说明：项目根目录暂未放置运行截图（demo 图片）。如需展示 App 运行效果，可将截图放入根目录并在此处补充，1 张居中、多张按 2 列表格等宽排版，使用相对路径引用。

---

## 技术栈

| 分类 | 依赖 | 说明 |
| :--- | :--- | :--- |
| 框架 | `react` / `react-native` | 19.1.0 / 0.81.4 |
| 平台 | `expo` | 54.0.9，提供原生 API 与构建工具 |
| 状态栏 | `expo-status-bar` | 自动适配设备状态栏 |
| 定位 | `expo-location` | 位置服务、权限、反向地理编码 |
| 安全区域 | `react-native-safe-area-context` | 防止刘海/下巴遮挡 |
| 图标 | `@expo/vector-icons` | Feather / MaterialIcons 等图标集 |
| 动画 | `react-native-reanimated` / `react-native-gesture-handler` | 轮播底层依赖 |
| 轮播 | `react-native-reanimated-carousel` | 自动播放、手势滑动 |

---

## 项目结构

```
.
├── App.js                  # 根组件，渲染 HomeScreen 与 StatusBar
├── app.json                # Expo 应用配置（名称、图标、权限等）
├── index.js                # 入口文件，注册根组件
├── package.json            # 依赖与脚本
├── readme.md               # 项目说明（本文件）
├── assets/                 # 静态资源（图标、启动画面）
│   ├── adaptive-icon.png   # Android 自适应图标前景
│   ├── favicon.png         # Web favicon
│   ├── icon.png            # 应用图标
│   └── splash-icon.png     # 启动画面
├── components/             # 可复用组件
│   ├── Carousels.js        # 图片轮播
│   ├── DressItem.js        # 服装项目卡片
│   └── Services.js         # 服务分类列表
└── screens/                # 页面
    └── HomeScreen.js       # 主屏幕（定位、搜索、轮播、服务、服装）
```

---

## 小白部署教程

> 面向零基础用户，从安装 Node.js 到看到 App 界面，一步步来。

### 第 0 步：确认环境

- 操作系统：Windows / macOS / Linux 均可
- 需要联网（首次安装依赖与加载远程图片）

### 第 1 步：安装 Node.js（LTS）

1. 打开 [https://nodejs.org](https://nodejs.org)
2. 下载并安装 **LTS（长期支持版）**，一路默认下一步即可
3. 安装完成后，打开"终端"（Windows 用 PowerShell / CMD，Mac 用"终端"App），输入：

   ```bash
   node -v
   npm -v
   ```

   能看到版本号即安装成功。

### 第 2 步：获取项目代码

如果还没有项目代码，使用 Git 克隆：

```bash
git clone <仓库地址> laundry
cd laundry
```

若已下载压缩包，解压后进入项目目录即可。

### 第 3 步：安装依赖

在项目根目录执行：

```bash
npm install
```

> 若使用 yarn：`yarn install`
>
> 安装可能需要几分钟，请耐心等待。若卡住，可尝试切换 npm 镜像：
> `npm config set registry https://registry.npmmirror.com`

### 第 4 步：启动开发服务器

```bash
npm start
```

执行后会启动 **Expo DevTools**，并在终端显示一个二维码。

### 第 5 步：在手机上预览

1. 在手机应用商店安装 **Expo Go**（Android / iOS 均可）
2. 打开 Expo Go，扫描终端中的二维码
3. 稍等片刻即可在手机上看到应用界面

> 也可在浏览器预览：在终端按 `w` 启动 Web 版本。

### 第 6 步（可选）：在模拟器运行

- **Android**：安装 Android Studio 并配置模拟器后，在终端按 `a`
- **iOS**（仅 Mac）：安装 Xcode 并配置模拟器后，在终端按 `i`

---

## 使用教程

### 启动命令一览

| 命令 | 作用 |
| :--- | :--- |
| `npm start` | 启动 Expo 开发服务器 |
| `npm run android` | 在 Android 设备/模拟器上运行 |
| `npm run ios` | 在 iOS 设备/模拟器上运行 |
| `npm run web` | 在浏览器中运行 |

### 首次运行流程

1. 启动后 App 会请求**定位权限**，请点击"允许"
2. 顶部地址栏会从"我们正在获取您的位置"变为具体地址
3. 向下滚动可看到轮播图、服务列表、服装项目

### 常用调试技巧

- **修改代码自动热更新**：保存文件即可在 Expo Go 中看到效果
- **打开开发者菜单**：在 Expo Go 中摇晃手机（iOS）或按菜单键（Android）
- **查看日志**：终端会实时输出 `console.log` 内容

---

## 功能特性

### 1. 位置服务
- 自动获取用户当前位置
- 反向地理编码展示"省-市-区-街道门牌号"
- 位置权限请求与管理

### 2. 图片轮播
- 自动播放，3 秒切换
- 支持手势滑动
- 宽度自适应屏幕

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

### 4. 服装选择
- 服装项目列表展示
- 每项包含图片、名称、价格
- "添加"按钮（当前未绑定事件，预留扩展）

---

## 组件详解

### HomeScreen（`screens/HomeScreen.js`）
主屏幕，整合所有功能：
- `checkIfLocationEnabled()`：检查系统定位开关
- `getCurrentLocation()`：请求权限 → 取坐标 → 反向地理编码 → 更新地址
- 渲染地址栏、搜索框、`Carousels`、`Services`、`DressItem` 列表

### Carousels（`components/Carousels.js`）
基于 `react-native-reanimated-carousel` 的轮播组件：
- `loop` 循环、`autoPlay` 自动播放、`autoPlayInterval=3000ms`
- 宽度取自 `Dimensions.get('window')`，高度固定 200px

### Services（`components/Services.js`）
水平滚动的服务分类卡片，静态数据 4 项。

### DressItem（`components/DressItem.js`）
单件服装卡片，props 接收 `item`（含 `image` / `name` / `price`）。

---

## FAQ 排错

### Q1：`npm install` 报错或很慢？
**A**：多为网络问题。切换国内镜像：

```bash
npm config set registry https://registry.npmmirror.com
npm install
```

若仍失败，删除缓存重试：

```bash
npm cache clean --force
rm -rf node_modules package-lock.json
npm install
```

### Q2：启动后二维码扫不开 / Expo Go 连不上？
**A**：
- 确保手机与电脑在**同一 Wi-Fi** 下
- 公司/校园网络可能隔离设备，改用手机热点重试
- Windows 防火墙可能拦截，允许 Node.js 通过防火墙

### Q3：地址栏一直显示"我们正在获取您的位置"？
**A**：
1. 检查设备 GPS/定位服务是否开启
2. 检查是否授予 App 定位权限
3. 模拟器需手动注入位置：Android Studio 模拟器右下角设置经纬度；iOS 模拟器菜单 Features → Location
4. 室内无 GPS 信号时，可改用 `Location.watchPositionAsync` 提升成功率

### Q4：提示"权限被拒绝"对话框？
**A**：用户未授予定位权限。请到系统设置 → 应用 → Expo Go → 权限 → 定位，改为"允许"。

### Q5：图片不显示 / 轮播图空白？
**A**：图片为远程 URL，需联网。弱网下加载慢属正常；若完全无法加载，检查网络代理或更换图片源。

### Q6：`react-native-reanimated-carousel` 报错？
**A**：确保已安装底层依赖：

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

### Q7：iOS 模拟器无法启动？
**A**：仅 macOS + Xcode 环境支持。安装 Xcode 后执行 `sudo xcode-select --install`，并确保模拟器已下载。

### Q8：如何重置项目依赖？
**A**：

```bash
rm -rf node_modules package-lock.json
npm install
```

---

## 未来扩展

1. 用户认证系统（登录 / 注册）
2. 购物车与下单流程
3. 支付系统集成
4. 服务预约与时间选择
5. 用户评价与反馈
6. 接入 Redux / Zustand 状态管理
7. "添加"按钮绑定事件，实现购物车数量增减

---

## 贡献指南

欢迎提交 Issue 与 Pull Request。提交前请确保：

1. 代码风格与现有文件保持一致（函数式组件 + Hooks）
2. 组件文件使用 PascalCase 命名
3. 关键函数补充 JSDoc 注释（用途 / 参数 / 返回值 / 注意事项）

---

## 许可证

本项目基于 **MIT License** 开源。