React-Native 与 PhoneGap 实战

别把跨端调包当会，先补掉环境与原生容器的认知缺口

很多前端转岗同学简历写着熟悉 React，实际一碰到移动端就露怯：环境跑不起来、组件套错层级、真机白屏找不到原因。这门课针对的就是这种只会写页面、不会跑工程的缺口。它不扯大框架，直接从 React 与原生组件的映射关系切入，把 View、Text、TextInput、Button 这些基础块单独拆开练，再落到一个计算器应用上。另一条线是 PhoneGap 与 Cordova，很多人以为这就是套个网页壳子，但真到打包配置、调用设备能力时照样卡壳。课程把这两套方案放在一起，让你看清声明式原生渲染与 WebView 混合开发在工程结构上的真实差异，而不是停留在概念名词。适合有 React 基础但没碰过移动端工程的人，或者用过跨端框架但说不清底层渲染逻辑的转岗者。

建议先跑环境与计算器实战，再对比 PhoneGap 工具链

资料包里没有现成跑通的工程，第二节的开发环境配置明确标了“无需资料、上机操作”，这是在提醒你别指望下载即用。建议先卡在这块把本地依赖、模拟器连接全部跑通，因为后面所有组件练习都依赖这个底座。跑通后按顺序看四个基础组件，别跳着看，因为 TextInput 的键盘处理和 Button 的平台差异会直接影响后面计算器的交互逻辑。第八节的计算器实战是整门课的练兵场，建议看完后自己重写一遍逻辑，不要照抄。最后两节的 PhoneGap 工具链是对比视角，重点理解它的项目结构和打包流程与 React-Native 的本质区别。练习时把每个组件单独写一个最小验证页面，改属性看效果，不要一上来就堆复杂布局。

学完能独立搭工程并讲清两套方案差异

看完这套资料，你应该能独立配好 React-Native 的本地环境，把一个包含表单输入与状态管理的业务页面跑在模拟器上，而不是只会用网页预览。遇到组件渲染异常，能定位是样式写法问题还是原生层级没套对。同时能独立用 PhoneGap 工具初始化一个工程，完成基础打包，并且讲清它和 React-Native 在渲染机制上的根本区别——一个是走原生组件树映射，一个是走 WebView 承载。如果你现在连本地依赖装在哪都说不清，或者以为跨端就是写一遍代码到处跑，那这就是你的补漏起点。资料配合练习的方式很简单：先空手搭环境，再拿组件做验证页，最后用计算器串起来，遇到卡壳再回查对应章节，别假装看一遍就会。