移动开发跨平台【免费下载链接】react-native-boilerplateA React Native template for building solid applications , using JavaScript or Typescript (you choose).项目地址https://gitcode.com/gh_mirrors/re/react-native-boilerplate点击查看免费下载本指南围绕 react-native-boilerplate 内置的调试方案展开讲解如何基于 Reactotron 这一桌面调试工具在开发阶段快速定位应用日志、Async StorageMMKV、网络请求与全局状态中出现的异常。读完本文你将掌握模板中 Reactotron 的默认配置、配置文件的实际位置与逐项含义并能按需扩展插件、结合模板的数据请求与存储体系完成系统性排查。为什么要为 React Native 应用配备一套专用调试工具在移动应用开发中Bug 往往难以定位尤其是当问题与网络请求相关时——你无法像在浏览器里那样直接打开 DevTools 观察请求与响应。React Native 虽然自带调试能力但正如模板文档中指出的官方 React Native Debugger 目前还不够稳定因此 react-native-boilerplate 选择集成 Reactotron 作为推荐的调试方案见调试指南原文档。Reactotron 是 Infinited Red 团队开发的一款桌面应用专门用于检查 React Native 项目在开发阶段可以非常直观地查看应用日志Logsconsole 输出、警告与错误信息异步存储Async Storage设备上持久化的数据内容网络调用Network CallsHTTP 请求的 URL、请求头、请求体与响应应用状态State通过插件订阅的全局状态变化例如 React Query 的缓存状态。在 react-native-boilerplate 中Reactotron 已经默认集成并完成基础配置无需额外安装即可使用。你只需要在调试时启动 Reactotron 桌面客户端再运行应用即可在桌面端集中观察上述信息。模板中的 Reactotron 集成方式与依赖Reactotron 相关的三个依赖全部以 devDependencies 的形式声明在模板 package.json 中仅用于开发阶段不会进入生产构建依赖包版本用途reactotron-react-native^5.1.12React Native 平台的核心适配层提供configure、useReactNative、connect等 APIreactotron-react-native-mmkv^0.2.8将 MMKV 实例接入 Reactotron用于在桌面端查看异步存储内容reactotron-react-query^2.0.2将 TanStack QueryReact Query的客户端接入 Reactotron用于查看查询缓存与状态三个插件分别对应模板中的三大基础设施RN 运行时日志、MMKV 本地存储见 src/App.tsx 中的createMMKV()与TanStack Query 数据请求见 src/App.tsx 中的queryClient。值得留意的是调试指南文档中提到的配置文件路径是./ReactotronConfig.js而在当前仓库中实际文件位于 template/src/reactotron.config.ts。这是模板自 4.0 起采用 TypeScript 后的路径演变配置逻辑本身是一致的以仓库实际源码为准。深入解析 Reactotron 配置从完整示例到逐项拆解调试指南给出了一个完整形态的配置示例它同时启用了 MMKV 存储插件与 React Query 插件还处理了连接断开时的清理工作。我们先完整看一遍这段配置再逐行拆解import Reactotron from reactotron-react-native; import mmkvPlugin from reactotron-react-native-mmkv; import { QueryClientManager, reactotronReactQuery, } from reactotron-react-query; import { storage, queryClient } from ./src/App; import config from ./app.json; const queryClientManager new QueryClientManager({ queryClient, }); // You can change the storage configuration here Reactotron.configure({ name: config.name, onDisconnect: () { queryClientManager.unsubscribe(); }, }) .useReactNative() // We use the mmkv plugin to store the Reactotron state .use(mmkvPlugin({ storage })) // We use the react-query plugin to store the Reactotron state .use(reactotronReactQuery(queryClientManager)) .connect();1. 引入依赖与共享实例Reactotron来自reactotron-react-native是整个配置的入口对象mmkvPlugin来自reactotron-react-native-mmkv负责把 src/App.tsx 中导出的storagecreateMMKV()创建的 MMKV 实例桥接到 ReactotronQueryClientManager与reactotronReactQuery来自reactotron-react-query负责把 src/App.tsx 中导出的queryClient桥接过去。注意queryClient的默认配置为retry: false即查询与变更失败后不做自动重试这一点在观察请求失败行为时需要留意。2.Reactotron.configure(...)应用级配置Reactotron.configure({ name: config.name, onDisconnect: () { queryClientManager.unsubscribe(); }, })name取自 app.json 的name字段值为Boilerplate用于在 Reactotron 桌面客户端中标识当前连接的应用实例onDisconnect连接断开时的回调。这里调用queryClientManager.unsubscribe()解除对 React Query 的订阅避免调试会话结束后留下悬挂的监听器。3. 插件装配useReactNative()与.use(...).useReactNative()启用 React Native 平台的基础能力包括 console 日志转发、网络请求拦截等.use(mmkvPlugin({ storage }))把 MMKV 存储实例交给 Reactotron之后可以在桌面端的 Async Storage 面板中直接查看storage中保存的所有键值对.use(reactotronReactQuery(queryClientManager))把 React Query 客户端交给 Reactotron之后可以在桌面端观察查询键query key、缓存数据、加载与错误状态.connect()建立与 Reactotron 桌面客户端的连接通常在应用启动时执行。4. 当前模板源码中的实际最小配置与上述完整示例相比仓库中 template/src/reactotron.config.ts 实际保留的是一份更精简的配置仅启用 React Native 基础能力与 MMKV 插件import type { ReactotronReactNative } from reactotron-react-native; import Reactotron from reactotron-react-native; import mmkvPlugin from reactotron-react-native-mmkv; import config from ../app.json; import { storage } from ./App; Reactotron.configure({ name: config.name, }) .useReactNative() .use(mmkvPluginReactotronReactNative({ storage })) .connect();从源码结构可以推断模板刻意保持了最小可用配置把 React Query 插件以及onDisconnect清理逻辑作为可选增强项留给开发者按需启用避免默认引入过多订阅开销。两种写法的差异点集中在reactotron-react-query的引入与onDisconnect回调上其余部分完全一致。调试配置的挂载方式与生产环境隔离配置文件本身不会自动执行需要应用在入口处显式引入。在模板入口文件 index.js 中可以看到预留的挂载逻辑// if (__DEV__) { // void import(/reactotron.config); // }当前模板中这段代码处于注释状态从源码结构可以推断标准做法是在__DEV__开发环境标志为真时通过动态import异步加载/reactotron.config实现两个目的开发环境自动启用仅在本地开发时建立 Reactotron 连接生产构建零负担发布Release构建中__DEV__为false调试代码不会被加载避免把调试逻辑带入线上包。如果项目同时使用了调试文档中推荐的 React Query 插件建议同样在上述入口内加载配置并确保queryClient与storage从 src/App.tsx 导出该文件当前已导出这两个实例见 src/App.tsx。通过 Reactotron 能排查到模板中的哪些关键数据把 Reactotron 接入模板的存储与数据请求体系后你可以直接在桌面端观察以下三类与模板运行强相关的数据1. MMKV 异步存储主题变体等持久化数据模板使用react-native-mmkv做本地存储最典型的场景是主题切换在 ThemeProvider 中初始化时通过storage.getString(theme)读取已保存的主题变体没有则写入storage.set(theme, default)用户切换主题时通过changeTheme同步写入见 ThemeProvider.tsx。借助mmkvPlugin你可以在 Reactotron 的存储面板中直接查看theme键的当前值验证用户切换主题后再次打开应用仍保持选择这一持久化链路是否正常。2. React Query 缓存启动加载与用户数据请求模板的数据请求体系基于 TanStack Query 与ky封装的 HTTP 客户端见 src/services/instance.ts。典型链路包括启动加载Startup屏幕通过useQuery({ queryKey: [startup], ... })在渲染首屏前完成初始化数据获取见 src/screens/Startup/Startup.tsx用户信息useUserhook 通过useFetchOneQuery请求用户数据底层由UserServices.fetchOne调用instance.get(users/{id})完成见 src/hooks/domain/user/userService.ts、src/hooks/domain/user/useUser.ts。启用reactotronReactQuery插件后你可以在桌面端观察这些查询的键、缓存数据与请求状态从而快速区分是请求本身失败还是数据转换zod schema 解析环节出错。3. 网络请求.useReactNative()自带的网络拦截能力会记录所有 HTTP 请求的地址、方法与响应。配合上文的服务层代码你可以确认请求 URL 是否因process.env.API_URL未配置而退化instance使用${process.env.API_URL ?? }/作为前缀见 src/services/instance.ts从而定位请求打到错误地址这类问题。使用步骤与注意事项安装 Reactotron 桌面客户端从 Reactotron 官方渠道下载并启动桌面应用按需启用配置取消 template/index.js 中__DEV__动态引入的注释或确认配置已在入口挂载先启动客户端再运行应用建议先打开 Reactotron 桌面端再执行yarn start与yarn android/yarn ios相关脚本定义见 template/package.json确保应用启动时能够顺利建立连接观察与排查在桌面端的 Logs、Async Storage、Network 面板中按需过滤信息。需要特别注意的两点调试配置属于开发期工具生产构建不应包含 Reactotron 连接逻辑务必通过__DEV__条件或构建配置隔离模板官方立场是在官方 React Native Debugger 稳定之前推荐使用 Reactotron 进行调试见调试指南原文档中的说明。更进一步本文覆盖了 react-native-boilerplate 中 Reactotron 的默认配置、插件体系与排查路径。若需要挖掘 Reactotron 的更多能力如自定义命令、状态快照、时间线回放等可以直接查阅 Reactotron 的官方文档——该工具是 Infinited Red 团队维护的开源项目其文档对插件的扩展机制有完整说明。在此基础上你还可以结合模板的 存储指南 与 数据获取指南进一步理解 MMKV 与 TanStack Query 在应用中的角色让 Reactotron 成为贯穿日志、存储与网络三大维度的统一调试入口。赞分享移动开发跨平台【免费下载链接】react-native-boilerplateA React Native template for building solid applications , using JavaScript or Typescript (you choose).项目地址https://gitcode.com/gh_mirrors/re/react-native-boilerplate点击查看免费下载相关推荐React Native Boilerplate 项目调试指南使用Reactotron进行高效调试React Native Boilerplate 项目调试指南使用Reactotron进行高效调试 为什么需要专业调试工具 在React Native应用开发移动开发跨平台Reactotron Async Storage调试React Native存储监控完全指南Reactotron Async Storage调试React Native存储监控完全指南 Reactotron是一个强大的React和React Nati开发工具React Native Debugger 网络请求调试指南使用 Chrome 开发者工具进行网络检查React Native Debugger 网络请求调试指南使用 Chrome 开发者工具进行网络检查 前言 在 React Native 应用开发过程中网开发工具移动开发桌面应用上一篇打破孤岛Immich无缝协作方案——打造个人照片管理的终极自由下一篇如何解密QQ聊天记录gh_mirrors/qq/qq-win-db-key终极指南 创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考
