# React Native Demo

**Repository Path**: fightroad/react-native-demo

## Basic Information

- **Project Name**: React Native Demo
- **Description**: 一个基于 React Native 和 Expo 的天气应用演示项目
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2026-01-17
- **Last Updated**: 2026-01-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 天气应用 Demo

一个基于 React Native 和 Expo 的天气应用演示项目。

## ✨ 特性

- 🌤️ 城市天气展示
- 🔍 实时搜索过滤
- 🔄 下拉刷新数据
- 🎨 美观的卡片UI设计
- 🌓 支持明暗主题切换
- 📱 跨平台支持 (iOS, Android, Web)

## 📸 截图展示

<div style="display: flex; gap: 10px;">
  <img src="./doc/pic2.jpg" alt="截图2" style="width: 50%;"/>
  <img src="./doc/pic1.jpg" alt="截图1" style="width: 50%;"/>
</div>

## 🚀 快速开始

### 安装依赖
```bash
npm install
```

### 启动项目
```bash
# 开发服务器
npm start

# iOS模拟器
npm run ios

# Android模拟器
npm run android

# Web浏览器
npm run web
```

## 📂 项目结构

详细的项目结构说明请查看：[项目结构说明.md](./项目结构说明.md)

## 🛠️ 技术栈

- **React Native** 0.81.5
- **Expo** SDK 54
- **Expo Router** 6.0.13
- **TypeScript** 5.9
- **React Navigation** 7.x

## 📱 主要功能

### 首页 - 天气列表
- 显示多个城市的天气信息
- 下拉刷新获取最新数据
- 搜索框实时过滤城市
- 卡片式展示，每张卡片包含：
  - 城市名称和天气状态
  - 温度显示
  - 湿度、风速、紫外线指数

### 关于页
- 项目介绍
- 技术栈展示
- 功能特性列表

## 🎯 学习要点

这个项目展示了：
- ✅ Expo Router 文件路由系统
- ✅ Tab 导航配置
- ✅ 组件化开发
- ✅ 主题化组件设计
- ✅ 状态管理 (useState, useEffect)
- ✅ 数据获取和过滤
- ✅ TypeScript 类型定义
- ✅ 跨平台兼容处理

## 📚 扩展方向

可以在此基础上添加：
- 🔐 用户认证系统
- 💾 数据持久化存储
- 🗺️ 地图集成
- 📨 推送通知
- 🎬 复杂动画效果
- 🧪 单元测试和集成测试

## 📖 文档

- [项目结构说明.md](./项目结构说明.md) - 详细的项目架构文档

## 📝 License

MIT