# react native 商城模板app

**Repository Path**: lin_30_0/react-native-mall-template-app

## Basic Information

- **Project Name**: react native 商城模板app
- **Description**: react-native 商城app模板，基于expo工具+nativewind
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 1
- **Created**: 2025-01-15
- **Last Updated**: 2025-09-09

## Categories & Tags

**Categories**: Uncategorized

**Tags**: React-native, React, Tailwind, expo, APP

## README

# React Native 电商 App 模板

基于 React Native + Expo + NativeWind 构建的现代化电商 App 模板，提供了完整的购物流程和用户体验。

## 🌟 特点

- 🎨 精美的 UI 设计，基于 TailwindCSS 的样式系统
- 📱 完整的电商业务流程
- 🚀 基于 Expo 的快速开发体验
- 💫 流畅的动画和交互效果
- 🛠 模块化的代码结构
- 📦 可复用的业务组件

## 🖼 预览

<div style="display: flex; flex-wrap: wrap; gap: 10px;">
  <img src="assets/preview/1.jpg" width="200" alt="首页" />
  <img src="assets/preview/2.jpg" width="200" alt="分类" />
  <img src="assets/preview/3.jpg" width="200" alt="购物车" />
  <img src="assets/preview/4.jpg" width="200" alt="个人中心" />
  <img src="assets/preview/5.jpg" width="200" alt="个人中心" />
  <img src="assets/preview/6.jpg" width="200" alt="个人中心" />
  <img src="assets/preview/7.jpg" width="200" alt="个人中心" />
  <img src="assets/preview/8.jpg" width="200" alt="个人中心" />
  <img src="assets/preview/9.jpg" width="200" alt="个人中心" />
  <img src="assets/preview/10.jpg" width="200" alt="个人中心" />
</div>

## 🔥 主要功能

### 🏠 首页

- 轮播广告
- 商品分类导航
- 限时秒杀
- 商品推荐
- 搜索功能

### 🛍 商品

- 商品详情展示
- 规格选择
- 加入购物车
- 立即购买
- 收藏功能

### 🛒 购物车

- 商品管理
- 规格修改
- 数量调整
- 价格计算
- 结算功能

### 📦 订单

- 订单列表
- 订单详情
- 订单状态追踪
- 物流信息
- 订单评价

### 👤 个人中心

- 用户信息管理
- 收货地址管理
- 我的订单
- 我的收藏
- 浏览历史
- 账户设置

## 🛠 技术栈

- React Native
- Expo
- NativeWind (TailwindCSS)
- Expo Router
- TypeScript
- React Native Reanimated
- React Native Safe Area Context

## 📱 支持平台

- iOS
- Android

## 📦 打包说明

### 1. 安装 EAS CLI
```bash
npm install -g eas-cli
```

### 2. 登录 Expo 账号
```bash
eas login
```

### 3. 配置 eas.json
```json
{
  "build": {
    "preview": {
      "android": {
        "buildType": "apk"
      },
      "ios": {
        "simulator": true
      }
    },
    "production": {
      "android": {
        "buildType": "app-bundle"
      },
      "ios": {
        "distribution": "app-store"
      }
    }
  }
}
```

### 4. 开发预览版本构建
```bash
# Android APK 预览版
eas build -p android --profile preview

# iOS 模拟器版本
eas build -p ios --profile preview

# iOS 开发版本（需要开发者账号）
eas build -p ios --profile development
```

### 5. 生产环境构建
```bash
# Android 生产版本
eas build -p android --profile production

# iOS App Store 版本
eas build -p ios --profile development
```

### 注意事项
- iOS 构建需要 Apple Developer 账号
- 首次构建会要求配置证书和 Provisioning Profile
- 构建完成后可在 Expo 网站下载构建文件
- iOS 预览版本可直接安装到模拟器测试
- 生产版本需要在各自的应用商店后台提交审核

## 🚀 快速开始

1. 克隆项目

```bash
git clone https://github.com/yourusername/your-repo-name.git
```

2. 安装依赖

```bash
cd your-repo-name
npm install
```

3. 启动开发服务器

```bash
npx expo start
```

## 📄 目录结构

```
├── app/                    # 应用主目录
│   ├── (tabs)/            # 底部标签页面
│   ├── (auth)/            # 认证相关页面
│   ├── product/           # 商品相关页面
│   ├── order/             # 订单相关页面
│   └── components/        # 可复用组件
├── assets/                # 静态资源
├── constants/             # 常量定义
└── types/                 # TypeScript类型定义
```

## 🎨 自定义主题

项目使用 NativeWind (TailwindCSS) 进行样式管理，你可以在 `tailwind.config.js` 中自定义主题：

```javascript
module.exports = {
  theme: {
    extend: {
      colors: {
        primary: {
          DEFAULT: "#FF4785",
          // ... 其他色阶
        },
      },
    },
  },
};
```

## 📝 License

MIT License © 2024