一个基于 React Native 的现代化新闻资讯移动应用，提供每日新闻浏览、实时热点资讯和丰富的工具箱功能。
RNDemo80 是一款功能丰富的跨平台新闻阅读应用，采用现代化的 React Native 技术栈构建。该应用为用户提供每日新闻摘要、实时热点追踪以及实用工具箱，支持 Android 和 iOS 双平台运行。
环境要求: Node.js >= 18, JDK 17
- 📰 每日新闻 - 提供每日60秒读懂世界的图文新闻摘要
- 🔥 实时热点 - 展示最新热点新闻列表，支持下拉刷新
- 📝 详情阅读 - 流畅的新闻详情页面浏览体验
- 📱 跨平台 - 一次编写，多端运行 (Android & iOS)
- ⚡ 性能优化 - 使用 FlashList 实现高性能列表渲染
- 🔄 状态管理 - Redux Toolkit + TanStack Query 数据管理
- 🎨 美观界面 - Material Design 风格 UI 组件
- 🛠️ 工具箱 - 集成日历、视频播放、图表等实用功能
| 技术/库 | 版本 | 描述 |
|---|---|---|
| React Native | 0.80.2 | 跨平台移动开发框架 |
| TypeScript | 5.0.4 | 类型安全的 JavaScript 超集 |
| React Navigation | ^7.1.17 | 页面路由与导航管理 |
| Redux Toolkit | latest | 状态管理解决方案 |
| TanStack Query | latest | 服务端状态管理和缓存 |
| Axios | ^1.11.0 | HTTP 请求客户端 |
| FlashList | ^2.0.2 | 高性能列表渲染组件 |
| React Native Paper | ^5.14.5 | Material Design UI 组件库 |
| React Native WebView | ^13.15.0 | 内嵌网页浏览器 |
| React Native Video | ^6.0.0 | 视频播放器组件 |
| React Native Calendars | ^1.1265.0 | 日历组件 |
| React Native Gifted Charts | ^1.4.41 | 图表组件 |
| React Native Update | ^10.30.3 | 应用热更新解决方案 |
src/
├── api/ # API 接口常量定义
│ └── api_contants.ts
├── component/ # 可复用 UI 组件
│ ├── list/ # 列表及刷新相关组件
│ ├── loading/ # 加载状态组件
│ └── refresh/ # 下拉刷新相关组件
└── pages/ # 页面级组件
├── every_day_news/ # 每日新闻模块
├── hot_today/ # 今日热点模块
└── tools_box/ # 工具箱模块
├── index.tsx # 工具箱主页
├── calendar_page.tsx # 日历组件页面
├── video_page.tsx # 视频播放器页面
└── charts_page.tsx # 图表组件页面
在开始之前，请确保已安装以下依赖：
- Node.js (>= 18.x)
- JDK (17.x)
- 对于 iOS 开发: Xcode 和 CocoaPods
- 对于 Android 开发: Android Studio 和 Android SDK
- 克隆项目
git clone https://github.com/your-username/RNDemo80.git
cd RNDemo80- 安装依赖
# 使用 npm
npm install
# 或使用 Yarn
yarn install- iOS 平台配置 (仅限 macOS)
# 安装 CocoaPods 依赖
cd ios && pod install && cd ..- 启动开发服务器
# 启动 Metro 服务器
npm start- 运行应用
# 运行 Android 应用
npm run android
# 运行 iOS 应用 (macOS)
npm run ios| 脚本 | 描述 |
|---|---|
npm start |
启动 Metro 开发服务器 |
npm run android |
构建并运行 Android 应用 |
npm run ios |
构建并运行 iOS 应用 |
npm run lint |
运行 ESLint 代码检查 |
npm test |
运行单元测试 |
npm run build:android |
构建 Android 发布版 APK |
npm run build:ios |
构建 iOS 发布版 IPA |
- 自动获取每日图文新闻内容 (
https://api.03c3.cn/api/zb?type=jsonImg) - 使用 WebView 组件展示新闻图片
- 集成 TanStack Query 进行数据缓存和管理
- 实时热点新闻列表 (
https://api-hot.imsyy.top/toutiao) - 支持下拉刷新获取最新数据
- 高性能 FlashList 渲染大量新闻条目
- Redux Toolkit 状态管理
- 日历组件: 提供日期选择和日历视图
- 视频播放器: 支持多种格式的视频播放
- 图表组件: 多种可视化图表展示数据
- Redux DevTools: 调试 Redux 状态变化
- React Native Debugger: 综合调试工具
- Flipper: 移动应用调试平台
- ESLint + Prettier: 代码质量和格式化
本项目配置了 React Native Skill，为 Claude Code 提供专业的 RN 开发指导。
| 类别 | 推荐方案 |
|---|---|
| 框架 | Expo SDK 53+ / Bare RN CLI |
| 架构 | New Architecture (Fabric + TurboModules) |
| 导航 | Expo Router v4 / React Navigation v7 |
| 状态管理 | Zustand + TanStack Query |
| 样式 | NativeWind / Tamagui |
| 列表 | FlashList |
| 动画 | Reanimated v3 + Gesture Handler v2 |
| 表单 | React Hook Form + Zod |
| 测试 | Jest + React Native Testing Library |
| 崩溃上报 | Sentry |
| CI/CD | EAS Build / GitHub Actions + Fastlane |
| 存储 | MMKV + WatermelonDB |
当项目目录下存在 package.json 且依赖了 react-native 或 expo 时，以下场景会自动触发 Skill：
- 开发 React Native 应用
- 创建 RN 项目或组件
- 调试性能问题
- 配置导航路由
- 管理状态
- 编写原生模块
- 处理平台差异
- 优化列表性能
- 处理动画效果
- 编写测试用例
- 集成 Sentry 等第三方服务
在 Claude Code 对话中输入：
/react-native
- 最佳实践: 基于 Meta/Microsoft/ByteDance/Shopify 等大厂经验
- 技术选型: 2025-2026 年最新技术栈推荐
- 代码示例: 常见场景的 TypeScript 代码模板
- 性能优化: 列表、动画、启动速度等优化策略
- New Architecture: JSI/Fabric/TurboModules 核心概念
本项目使用以下公开 API:
- 每日新闻:
https://api.03c3.cn/api/zb?type=jsonImg - 热点新闻:
https://api-hot.imsyy.top/toutiao
注意: 由于使用的是第三方免费 API，可能存在不稳定的情况。在生产环境中建议使用自己的后端服务。
- 分层架构: 清晰的页面、组件、API 分离
- 类型安全: 完整的 TypeScript 类型定义
- 状态管理: Redux Toolkit + TanStack Query 组合方案
- UI 组件: React Native Paper Material Design 组件库
- 路由导航: React Navigation 7 现代化导航方案
# 运行所有测试
npm test
# 运行测试并生成覆盖率报告
npm run test:coverage
# 运行特定测试文件
npm run test -- src/__tests__/example.test.ts常见问题及解决方案:
- iOS 编译错误: 确保运行了
pod install并且 Xcode 版本兼容 - Android 编译错误: 检查 Android SDK 版本和环境变量配置
- Metro 无法启动: 清除缓存
npx react-native start --reset-cache - 依赖冲突: 删除
node_modules并重新安装
更多帮助请参考 React Native 官方文档。
我们欢迎社区贡献！以下是参与项目的方式：
- Fork 项目
- 创建功能分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 创建 Pull Request
请确保更新测试用例并遵循代码规范。
本项目采用 MIT 许可证，详情请参阅 LICENSE 文件。
- React Native - 跨平台移动开发框架
- Redux Toolkit - 状态管理工具
- TanStack Query - 服务端状态管理
- 所有开源库的维护者和贡献者们