RN Web App

一个基于 React Native 构建的跨平台应用，支持 iOS、Android 和 Web 平台。该项目采用现代化的技术栈，包含完整的用户界面组件库、状态管理、网络请求和导航系统。

✨ 特性

🚀 跨平台支持: 同时支持 iOS、Android 和 Web 平台
📱 响应式设计: 适配多种屏幕尺寸和设备
🎨 丰富的 UI 组件: 包含日历、对话框、下拉菜单、评分等多种自定义组件
🔐 用户认证: 完整的登录和权限管理系统
🌐 网络请求: 基于 Axios 的模块化 API 请求封装
📦 状态管理: 使用 Zustand 进行轻量级状态管理
🎭 动画支持: 集成 Lottie 动画和 Reanimated
🔒 数据加密: 支持 Crypto-JS 加密功能
📅 日历功能: 集成日历组件用于日期选择
📊 二维码生成: 支持二维码生成和扫描
🎯 TypeScript: 完整的类型支持

📋 目录结构

rn-app/
├── src/
│   ├── api-request/          # API 请求模块
│   │   ├── instance.ts       # Axios 实例配置
│   │   ├── request.ts        # 请求拦截器
│   │   ├── interface/        # 请求/响应接口定义
│   │   └── modules/          # API 模块（登录、首页、个人中心等）
│   ├── assets/               # 静态资源
│   │   └── lottie/           # Lottie 动画文件
│   ├── components/           # 可复用组件
│   │   ├── Advertising/      # 广告组件
│   │   ├── AppNav/           # 导航栏组件
│   │   ├── Button/           # 按钮组件
│   │   ├── Calendar/         # 日历组件
│   │   ├── Chipview/         # 标签组件
│   │   ├── Copyright/        # 版权组件
│   │   ├── Dialog/           # 对话框组件
│   │   ├── Drawer/           # 抽屉组件
│   │   ├── Dropdown/         # 下拉菜单组件
│   │   ├── FlatList/         # 列表组件
│   │   ├── HelperText/       # 辅助文本组件
│   │   ├── Loading/          # 加载组件
│   │   ├── Qrcode/           # 二维码组件
│   │   ├── Rating/           # 评分组件
│   │   ├── Tab/              # 标签页组件
│   │   └── Textinput/        # 文本输入组件
│   ├── hooks/                # 自定义 Hooks
│   │   ├── comFun.ts         # 通用函数
│   │   ├── crypto/           # 加密相关
│   │   └── utils/            # 工具函数
│   ├── navigator/            # 导航配置
│   │   ├── stack-screen.tsx  # 堆栈导航
│   │   ├── Layout/           # 布局组件
│   │   └── Navbar/           # 导航栏
│   ├── pages/                # 页面组件
│   │   ├── home/             # 首页
│   │   ├── login/            # 登录页
│   │   └── mine/             # 个人中心
│   ├── redux/                # 状态管理
│   │   ├── localStorage.ts   # 本地存储
│   │   └── zustand/          # Zustand store
│   ├── router/               # 路由配置
│   │   └── navbar-bottom.ts  # 底部导航栏配置
│   └── static/               # 静态资源
│       └── themes/           # 主题配置
├── android/                  # Android 原生代码
├── ios/                      # iOS 原生代码
├── public/                   # Web 公共资源
├── types/                    # TypeScript 类型定义
├── App.tsx                   # 应用入口
├── package.json              # 依赖配置
├── tsconfig.json             # TypeScript 配置
├── tailwind.config.js        # Tailwind CSS 配置
├── webpack.config.js         # Webpack 配置
└── babel.config.js           # Babel 配置

🛠️ 技术栈

核心框架

React Native (0.74.2) - 跨平台移动应用框架
React (18.2.0) - UI 库
React Native Web (0.19.12) - Web 平台支持
TypeScript (5.4.5) - 类型安全

UI 组件

React Native Paper (5.12.3) - Material Design 组件库
React Native Vector Icons (10.1.0) - 图标库
React Native SVG (15.3.0) - SVG 支持
twrnc (4.2.0) - Tailwind CSS in React Native

状态管理

Zustand (4.5.3) - 轻量级状态管理
AsyncStorage (1.23.1) - 本地数据持久化

网络请求

Axios (1.7.2) - HTTP 客户端
React Native Dotenv (3.4.11) - 环境变量管理

动画

Lottie React Native (6.7.2) - Lottie 动画
React Native Reanimated (3.12.0) - 高性能动画

工具库

Day.js (1.11.11) - 日期处理
Crypto-JS (4.2.0) - 加密库
Lodash (4.17.5) - 工具函数库

功能组件

React Native Calendars (1.305.0) - 日历组件
React Native QRCode SVG (6.3.1) - 二维码生成
React Native Image Picker (7.1.2) - 图片选择器
React Native Toast Message (2.2.0) - 消息提示

构建工具

Webpack (5.91.0) - Web 端打包工具
Metro (0.74.84) - React Native 打包工具
Babel (7.24.7) - JavaScript 编译器

📦 安装

前置要求

Node.js >= 18
Yarn 4.2.2
React Native CLI
Xcode (iOS 开发)
Android Studio (Android 开发)

克隆项目

git clone https://github.com/witeem/rn-app.git
cd rn-app

安装依赖

yarn install

iOS 额外步骤

cd ios
pod install
cd ..

🚀 运行项目

移动端开发

Android

# 启动 Metro bundler
yarn start

# 在另一个终端运行 Android
yarn android

iOS

# 启动 Metro bundler
yarn start

# 在另一个终端运行 iOS
yarn ios

Web 端开发

# 开发环境
yarn dev

# UAT 环境
yarn uat

# 生产环境
yarn prod

🏗️ 构建

Android 打包

# 生成 Android bundle
yarn build:android

# 或使用 Gradle 构建 APK
cd android
./gradlew assembleRelease

Web 打包

# 开发环境构建
yarn build:dev

# UAT 环境构建
yarn build:uat

# 生产环境构建
yarn build:prod

📱 主要功能模块

1. 用户认证

用户登录/注册
密码加密存储
Token 管理
权限控制

2. 首页

数据展示
内容列表
下拉刷新
上拉加载

3. 个人中心

用户信息展示
设置管理
账户管理

4. UI 组件库

按钮组件: 多种样式的按钮
输入框组件: 表单输入控件
对话框组件: 弹窗、确认框、支付对话框
日历组件: 日期选择器
下拉菜单: 单选/多选下拉
评分组件: 星级评分
加载组件: Loading 动画
二维码组件: 生成和展示二维码

🔧 配置

环境变量

创建 .env 文件配置不同环境：

API_BASE_URL=https://api.example.com
APP_NAME=RN Web App

路径别名

项目配置了路径别名 ~ 指向 src 目录：

import { Button } from '~/components/Button';
import { useAuth } from '~/hooks/useAuth';

📝 代码规范

项目使用 ESLint 和 Prettier 进行代码规范检查：

# 运行 lint 检查
yarn lint

# 自动修复格式问题
yarn lint --fix

🧪 测试

# 运行测试
yarn test

# 运行测试并生成覆盖率报告
yarn test --coverage

📄 许可证

本项目采用 MIT 许可证。

🙏 致谢

感谢以下开源项目和社区的支持：

React Native - Meta 开源的跨平台移动应用框架
React - Facebook 开源的 UI 库
React Navigation - React Native 导航解决方案
React Native Paper - Material Design 组件库
Zustand - 轻量级状态管理库
Axios - 基于 Promise 的 HTTP 客户端
Lottie - Airbnb 开源的动画库
Day.js - 轻量级日期处理库
Crypto-JS - JavaScript 加密库
React Native Community - React Native 社区维护的组件和工具
TypeScript - Microsoft 开源的 JavaScript 超集
Webpack - 现代 JavaScript 应用打包工具
Babel - JavaScript 编译器
Tailwind CSS - 实用优先的 CSS 框架
React Native Vector Icons - 图标库
React Native SVG - SVG 支持
React Native Calendars - Wix 开源的日历组件
React Native QRCode SVG - 二维码生成库

Name		Name	Last commit message	Last commit date
Latest commit History 6 Commits
.bundle		.bundle
.yarn		.yarn
__tests__		__tests__
android		android
gradle		gradle
ios		ios
public		public
src		src
types		types
.env		.env
.env.prod		.env.prod
.env.uat		.env.uat
.eslintrc.js		.eslintrc.js
.gitignore		.gitignore
.prettierrc.js		.prettierrc.js
.watchmanconfig		.watchmanconfig
.yarnrc.yml		.yarnrc.yml
App.tsx		App.tsx
Gemfile		Gemfile
LICENSE		LICENSE
README.md		README.md
app.json		app.json
babel.config.js		babel.config.js
build.gradle.kts		build.gradle.kts
gradlew		gradlew
index.js		index.js
index.web.js		index.web.js
jest.config.js		jest.config.js
jsconfig.json		jsconfig.json
metro.config.js		metro.config.js
package.json		package.json
settings.gradle.kts		settings.gradle.kts
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json
webpack.config.js		webpack.config.js
yarn.lock		yarn.lock

Folders and files

Latest commit

History

Repository files navigation

RN Web App

✨ 特性

📋 目录结构

🛠️ 技术栈

核心框架

UI 组件

导航

状态管理

网络请求

动画

工具库

功能组件

构建工具

📦 安装

前置要求

克隆项目

安装依赖

iOS 额外步骤

🚀 运行项目

移动端开发

Android

iOS

Web 端开发

🏗️ 构建

Android 打包

Web 打包

📱 主要功能模块

1. 用户认证

2. 首页

3. 个人中心

4. UI 组件库

🔧 配置

环境变量

路径别名

📝 代码规范

🧪 测试

📄 许可证

🙏 致谢

About

Resources

License

Uh oh!

Stars

Watchers

Forks

Releases

Packages 0

Uh oh!

Contributors

Uh oh!

Languages

Packages