{"id":84795,"url":"https://github.com/xiaomingx/awesome-react-native","name":"awesome-react-native","description":"Awesome React Native components, news, tools, and learning material!","projects_count":44,"last_synced_at":"2026-07-11T18:00:21.406Z","repository":{"id":264588568,"uuid":"893766301","full_name":"XiaomingX/awesome-react-native","owner":"XiaomingX","description":"Awesome React Native components, news, tools, and learning material!","archived":false,"fork":false,"pushed_at":"2025-09-17T06:28:06.000Z","size":19,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-11-13T15:03:58.257Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/XiaomingX.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2024-11-25T07:08:47.000Z","updated_at":"2025-09-17T06:28:09.000Z","dependencies_parsed_at":"2024-11-25T08:22:25.740Z","dependency_job_id":"cc56a50b-2365-43e6-a520-521821fc991c","html_url":"https://github.com/XiaomingX/awesome-react-native","commit_stats":null,"previous_names":["xiaomingx/awesome-react-native"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/XiaomingX/awesome-react-native","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XiaomingX%2Fawesome-react-native","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XiaomingX%2Fawesome-react-native/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XiaomingX%2Fawesome-react-native/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XiaomingX%2Fawesome-react-native/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/XiaomingX","download_url":"https://codeload.github.com/XiaomingX/awesome-react-native/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/XiaomingX%2Fawesome-react-native/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":27283993,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-11-26T02:00:06.075Z","response_time":193,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"created_at":"2025-02-18T06:30:13.502Z","updated_at":"2026-07-11T18:00:21.407Z","primary_language":null,"list_of_lists":false,"displayable":true,"categories":["二、核心开发工具与库（按场景分类）","Uncategorized","导航（Navigation）","深度链接（Deep Linking）","表单（Forms）","构建与开发（Build \u0026 Development）","样式（Styling）","存储（Storage）","后端（Backend）","动画（Animation）","其他平台支持（Other Platforms）","三、构建、调试与部署","工具","学习资源","图书","五、系统学习资源","四、项目模板与开源示例","一、入门与核心教程（新手必看）","开源应用示例","开发框架和组件库","模板（种子项目）","博客","媒体（Media）"],"sub_categories":["4. 动画（交互效果）","Uncategorized","7. 系统功能（权限/设备信息）","1. 调试工具","教程","视频","3. 博客与专栏","2. 开源应用示例","基础操作指南","1. 官方文档（权威首选）","8. 后端与网络","3. 表单（输入与验证）","1. 快速启动模板","2. 热更新与 CI/CD","6. 媒体（图片/相机/视频）","进阶实战项目（边练边学）","2. 导航（页面跳转）","9. 深度链接（App 外部跳转）","3. 性能优化工具","2. 视频教程"],"readme":"# awesome-react-native（React Native 0.70+ 实战指南：从入门到上线）\n\u003e 说明：本列表聚焦 **React Native 0.70+ 稳定版** 与 **Expo 生态**（新手友好的开发工具链），筛选维护活跃、社区认可的资源。结构按「入门→实战→工具→部署→学习」梳理，每个资源附「核心价值」，帮你快速匹配需求。\n\n\n## 一、入门与核心教程（新手必看）\n### 基础操作指南\n1.  **Firebase 身份认证集成（2024 版）**  \n    [链接](https://rnfirebase.io/auth/usage)  \n    核心价值：替代旧版教程，采用官方推荐的 `@react-native-firebase/auth` 库，一步实现邮箱/密码、Google/Apple 第三方登录，含 iOS/Android 原生配置细节，新手可直接复用代码。\n\n2.  **Cloud Firestore 实时数据库入门**  \n    [链接](https://rnfirebase.io/firestore/usage)  \n    核心价值：Firebase 官方文档的 React Native 适配版，讲解「数据增删改查」「实时监听更新」「离线数据同步」，搭配 Expo 集成案例，避免原生配置坑。\n\n3.  **文件/图片上传全流程（现代方案）**  \n    [链接](https://docs.expo.dev/versions/latest/sdk/imagepicker/) + [axios 上传示例](https://www.npmjs.com/package/axios)  \n    核心价值：摒弃旧版文件选择方案，用 Expo 官方 `expo-image-picker` 选图，配合 `axios` 实现「表单上传」「进度显示」，支持 Android/iOS 统一逻辑，无需原生开发。\n\n4.  **环境变量管理（安全+优雅）**  \n    [链接](https://docs.expo.dev/build-reference/variables/)  \n    核心价值：Expo 官方方案，用 `eas-json` 管理开发/生产环境变量（如 API 密钥、后端地址），避免硬编码，支持 Git 忽略敏感信息，适配 CI/CD 流程。\n\n5.  **iOS/Android 应用发布指南（EAS 方案）**  \n    [链接](https://docs.expo.dev/build/introduction/)  \n    核心价值：替代旧版手动打包流程，用 Expo Application Services (EAS) 一键构建 IPA/APK，含「应用签名」「应用商店上架」（App Store/Google Play）全流程，新手 1 小时可完成首次发布。\n\n6.  **跨平台推送通知（OneSignal + Expo）**  \n    [链接](https://docs.expo.dev/guides/push-notifications/)  \n    核心价值：结合 Expo 推送服务与 OneSignal，实现「前台/后台/杀死状态通知」，支持自定义图标、跳转指定页面，含 iOS 推送证书配置教程。\n\n7.  **TypeScript 开发 React Native（从配置到实战）**  \n    [链接](https://reactnative.dev/docs/typescript)  \n    核心价值：官方文档手把手教「初始化 TS 项目」「组件/状态类型定义」「API 接口类型适配」，附常见类型错误解决技巧，避免后期重构成本。\n\n\n### 进阶实战项目（边练边学）\n1.  **实时新闻阅读 App**  \n    [链接](https://www.freecodecamp.org/news/build-a-news-app-with-react-native-expo-and-newsapi/)  \n    核心价值：用 Expo + NewsAPI 实现「新闻分类」「下拉刷新」「详情页跳转」，集成 `react-navigation` 导航和 `react-query` 数据缓存，代码结构清晰，适合练手基础业务逻辑。\n\n2.  **智能聊天机器人（Dialogflow 集成）**  \n    [链接](https://blog.logrocket.com/build-chatbot-react-native-dialogflow/)  \n    核心价值：对接 Google Dialogflow 实现「意图识别」「多轮对话」，用 `react-native-gifted-chat` 快速搭建聊天界面，支持发送文字/图片，含后端接口代理配置（解决跨域）。\n\n3.  **离线优先 App 开发（数据持久化）**  \n    [链接](https://docs.expo.dev/guides/offline-support/)  \n    核心价值：结合 `@react-native-async-storage/async-storage`（轻量数据）和 `WatermelonDB`（大数据），实现「离线缓存→在线同步」，附「网络状态监听」「数据冲突解决」方案，适合天气、笔记类 App。\n\n\n## 二、核心开发工具与库（按场景分类）\n### 1. UI 组件库（快速搭界面）\n| 库名称                | 链接                                      | 核心价值                                                                 |\n|-----------------------|-------------------------------------------|--------------------------------------------------------------------------|\n| NativeBase            | https://nativebase.io/                    | 跨平台 UI 库，支持主题定制（浅色/深色模式），组件覆盖按钮、表单、卡片等，Expo 友好 |\n| React Native Paper    | https://callstack.github.io/react-native-paper/ | Material Design 官方适配库，组件轻量化，支持自定义样式，适合 Material 风格 App |\n| Expo UI Components    | https://docs.expo.dev/ui-components/overview/ | Expo 内置组件集，无需额外安装，含头像、徽章、进度条等，新手零配置可用       |\n| react-native-gifted-chat | https://github.com/FaridSafi/react-native-gifted-chat | 聊天界面「现成解决方案」，支持气泡、时间戳、头像，可直接集成到聊天机器人/社交 App |\n\n### 2. 导航（页面跳转）\n- **react-navigation 6.x**  \n  [链接](https://reactnavigation.org/docs/getting-started)  \n  核心价值：当前最主流的导航库，支持堆栈导航（页面跳转）、标签导航（底部/顶部 Tab）、抽屉导航，适配 React Native 0.70+，文档详尽，社区问题解决方案多。  \n  *（注：已移除过时的 `react-native-router-flux`，其基于旧版 API 且维护停滞）*\n\n- **expo-router**  \n  [链接](https://docs.expo.dev/routing/introduction/)  \n  核心价值：Expo 官方路由方案，类似 Web 端 React Router，用文件系统定义路由（如 `app/home.js` 对应 `/home` 路径），新手易上手，支持深度链接。\n\n### 3. 表单（输入与验证）\n- **react-hook-form**  \n  [链接](https://react-hook-form.com/get-started#ReactNative)  \n  核心价值：轻量（无依赖）、高性能（减少重渲染），支持表单验证、默认值、错误提示，适配 React Native 输入组件，适合登录、注册等场景。\n\n- **formik + yup**  \n  [链接](https://formik.org/docs/guides/react-native)  \n  核心价值：表单逻辑与 UI 分离，配合 `yup` 实现「Schema 验证」（如手机号格式、密码长度），适合复杂表单（如个人信息填写）。\n\n### 4. 动画（交互效果）\n- **react-native-reanimated 3.x**  \n  [链接](https://docs.swmansion.com/react-native-reanimated/)  \n  核心价值：官方推荐的高性能动画库，替代原生 `Animated` API，支持手势动画（如滑动删除）、循环动画，Expo 可直接使用，无需原生配置。\n\n- **Lottie React Native**  \n  [链接](https://github.com/lottie-react-native/lottie-react-native)  \n  核心价值：导入 AE 制作的动画文件（JSON 格式），实现复杂动效（如启动页动画、加载动画），无需手写关键帧，设计师可直接输出资源。\n\n### 5. 存储（数据持久化）\n| 存储方案                          | 链接                                          | 适用场景                                  |\n|-----------------------------------|-----------------------------------------------|-------------------------------------------|\n| @react-native-async-storage/async-storage | https://react-native-async-storage.github.io/async-storage/ | 轻量数据（如用户 Token、设置项），官方替代旧版 AsyncStorage |\n| WatermelonDB                      | https://nozbe.github.io/WatermelonDB/         | 大数据量、离线优先（如新闻、聊天记录），支持同步 |\n| Realm JS                          | https://www.mongodb.com/docs/realm/sdk/react-native/ | 复杂数据结构（如嵌套对象），支持加密，适合隐私数据存储 |\n\n### 6. 媒体（图片/相机/视频）\n- **expo-image-picker**  \n  [链接](https://docs.expo.dev/versions/latest/sdk/imagepicker/)  \n  核心价值：Expo 官方工具，一键调用系统相册/相机选图，支持压缩、裁剪，无需原生权限配置。\n\n- **react-native-vision-camera**  \n  [链接](https://mrousavy.com/react-native-vision-camera/)  \n  核心价值：替代过时的 `react-native-camera`，支持实时相机预览、条形码扫描、拍照/录像，性能优于原生相机组件。\n\n- **react-native-video**  \n  [链接](https://github.com/react-native-video/react-native-video)  \n  核心价值：跨平台视频播放器，支持本地/网络视频、倍速播放、全屏切换，适配 Expo 和原生项目。\n\n### 7. 系统功能（权限/设备信息）\n- **expo-permissions**  \n  [链接](https://docs.expo.dev/versions/latest/sdk/permissions/)  \n  核心价值：统一管理相机、位置、通知等权限请求，返回清晰的权限状态（授权/拒绝/未请求），适配 iOS/Android 权限逻辑差异。\n\n- **react-native-device-info**  \n  [链接](https://github.com/react-native-device-info/react-native-device-info)  \n  核心价值：获取设备型号、系统版本、唯一标识（如 UUID），用于统计设备信息、适配不同机型。\n\n### 8. 后端与网络\n- **axios**  \n  [链接](https://axios-http.com/docs/intro)  \n  核心价值：替代 `fetch`，支持请求拦截（加 Token）、响应拦截（统一错误处理）、取消请求，适配 React Native 网络场景。\n\n- **react-native-blob-util**  \n  [链接](https://github.com/RonRadtke/react-native-blob-util)  \n  核心价值：替代废弃的 `react-native-fetch-blob`，支持文件下载、上传、解压，适合大文件处理（如离线包更新）。\n\n### 9. 深度链接（App 外部跳转）\n- **expo-linking**  \n  [链接](https://docs.expo.dev/guides/linking/)  \n  核心价值：Expo 官方方案，实现「外部链接跳转 App 指定页面」（如短信链接打开详情页），支持 iOS Universal Links 和 Android App Links。\n\n\n## 三、构建、调试与部署\n### 1. 调试工具\n- **Flipper**  \n  [链接](https://fbflipper.com/docs/getting-started/react-native/)  \n  核心价值：官方推荐的调试工具，集成日志查看、UI 检查、网络请求分析、Redux 状态监控，功能远超 React Native Debugger。\n\n- **React Native Debugger**  \n  [链接](https://github.com/jhen0409/react-native-debugger)  \n  核心价值：轻量调试工具，集成 React DevTools 和 Redux DevTools，适合不习惯 Flipper 的开发者，即开即用。\n\n### 2. 热更新与 CI/CD\n- **Expo EAS Update**  \n  [链接](https://docs.expo.dev/eas-update/introduction/)  \n  核心价值：Expo 官方热更新服务，无需上架应用商店，即可推送 JS/UI 变更，支持灰度发布、回滚，适合紧急修复小问题。\n\n- **CodePush**  \n  [链接](https://microsoft.github.io/code-push/)  \n  核心价值：Microsoft 推出的热更新工具，适配原生 React Native 项目，支持 Android/iOS 独立更新，适合非 Expo 项目。\n\n- **Fastlane + EAS Build**  \n  [链接](https://docs.expo.dev/build/automating-builds/)  \n  核心价值：自动化构建流程，用 Fastlane 管理应用商店上传，EAS Build 负责打包，实现「提交代码→自动打包→自动上传测试」全流程。\n\n### 3. 性能优化工具\n- **react-native-bundle-visualizer**  \n  [链接](https://github.com/IjzerenHein/react-native-bundle-visualizer)  \n  核心价值：可视化分析 App 打包体积，定位「大体积依赖库」（如某些 UI 库），帮你瘦身安装包。\n\n- **expo-image**  \n  [链接](https://docs.expo.dev/versions/latest/sdk/image/)  \n  核心价值：替代原生 `Image` 组件，支持图片缓存、懒加载、自动压缩，解决 React Native 图片加载慢的问题。\n\n\n## 四、项目模板与开源示例\n### 1. 快速启动模板\n- **Expo Template Blank (TypeScript)**  \n  [链接](https://docs.expo.dev/get-started/create-a-new-app/)  \n  核心价值：新手首选，`npx create-expo-app@latest my-app --template blank-typescript` 一键初始化，含 TS 配置、Expo 基础依赖，零原生配置。\n\n- **Ignite**  \n  [链接](https://github.com/infinitered/ignite)  \n  核心价值：进阶项目模板，内置 Redux Toolkit、React Query、react-navigation，提供标准化目录结构，适合中大型项目。\n\n- **React Native Boilerplate**  \n  [链接](https://github.com/thecodingmachine/react-native-boilerplate)  \n  核心价值：含 ESLint/Prettier 代码规范、Jest 测试配置，支持 TypeScript，适合团队协作开发。\n\n### 2. 开源应用示例\n- **GitPoint**  \n  [链接](https://github.com/gitpoint/git-point)  \n  核心价值：GitHub 第三方客户端，实现仓库浏览、Issue 管理、星标收藏，代码结构清晰，适合学习网络请求、状态管理。\n\n- **Expo Snack Examples**  \n  [链接](https://snack.expo.dev/)  \n  核心价值：Expo 在线代码编辑器，含数百个小型示例（如手势动画、地图集成），可直接运行查看效果，适合碎片化学习。\n\n- **30 Days of React Native**  \n  [链接](https://github.com/fangwei716/30-days-of-react-native)  \n  核心价值：30 个迷你项目（计算器、天气 App、Todo 列表），每个项目聚焦 1-2 个知识点，新手可按天打卡练习。\n\n\n## 五、系统学习资源\n### 1. 官方文档（权威首选）\n- [React Native 官方文档](https://reactnative.dev/docs/getting-started)  \n  核心价值：基础概念（组件、状态、样式）到进阶技巧（原生模块集成）全覆盖，示例代码适配最新版本。\n\n- [Expo 官方文档](https://docs.expo.dev/)  \n  核心价值：新手友好的「零原生开发」指南，从环境搭建到 App 发布一步到位，避免配置 Android Studio/Xcode 的复杂流程。\n\n### 2. 视频教程\n- **Expo 官方 YouTube 频道**  \n  [链接](https://www.youtube.com/@Expo)  \n  核心价值：短视频教程（5-15 分钟），讲解「图片上传」「推送通知」等具体功能，附带可复制的代码。\n\n- **React Native 官方 YouTube 频道**  \n  [链接](https://www.youtube.com/@ReactNative)  \n  核心价值：技术演讲和更新解读，适合了解 React Native 最新特性（如架构升级、性能优化）。\n\n### 3. 博客与专栏\n- [Expo Blog](https://blog.expo.dev/)  \n  核心价值：发布 Expo 新功能、最佳实践（如离线支持、性能优化），作者均为 Expo 核心团队成员。\n\n- [LogRocket React Native 专栏](https://blog.logrocket.com/category/react-native/)  \n  核心价值：实战型文章，解决「列表性能差」「原生模块适配」等实际开发问题，附带代码示例。\n\n- [React Native Training](https://medium.com/react-native-training)  \n  核心价值：进阶技巧分享，如「自定义 Hook 封装」「Redux 状态管理优化」，适合有基础的开发者。\n\n### 4. 经典书籍\n- **《React Native in Action》**  \n  核心价值：系统性讲解 React Native 开发，从基础组件到原生模块集成，含完整项目案例（天气 App、社交 App）。\n\n- **《Learning React Native》（第 2 版）**  \n  核心价值：新手友好，用通俗语言解释「JSX 语法」「跨平台原理」，适合零基础入门。\n","projects_url":"https://awesome.ecosyste.ms/api/v1/lists/xiaomingx%2Fawesome-react-native/projects"}