React Native 初体验

背景

之前做过 React 前端开发，这学期学校有一门移动开发的课教 React Native，我就选了。上了半学期，做了几个小的 React Native 项目，感觉还挺好，简单写写 React Native 的开发体验。

从 React 到 React Native

直到接触了 React Native，我才惊叹于 React 的强大。

因为从 React 到 React Native，学习成本实在太低了！你还是在用 React 的核心框架在开发，只不过渲染方式不再是 DOM，而是安卓或者 iOS 的 App（当然也包括 web）。

这种感觉就好比是，你在一架电钢琴上练习技巧，后来发现还需要钢琴之外的其他音色，这时候只需要切换一下音色就好了。你的所有指法、节奏，等等等等，都可以复用，都没有白练！

具体来说，所有你从 react 这个包里 import 的东西，在开发 React Native 的时候都还在。尤其是包括 function component 这种好东西！

需要被换掉的貌似只有 react-dom，这个东西本身也不怎么用到。取而代之的是一堆 React Native 的组件，有些功能（比如页面导航）实现起来相比 web 确实稍微麻烦一些，但总的来说上手还是非常快！

这还不说有其他那么多 JS 的库都等着你来用。比如我这学期是想开发一个小游戏，那么像 matter.js 这样的 JS 物理引擎库都可以拿起来就用！简直不能更痛快了！

Expo

之前纠结要不要选这门移动开发的课的一个重要原因就是，我觉得电脑连接手机会很麻烦（我用的小米手机就从来没有和电脑成功连上过！这里必须要吐槽一下）。

后来发现，我们是在 Expo 这个平台上进行 React Native 开发的，根本不需要电脑连接手机！只需要在手机上下载一个 Expo 的 App，然后在电脑上运行一个服务，保证手机和电脑在同一个局域网内就可以了，在 Expo App 中可以直接运行你开发的 App，而且支持热刷新！

（当然，也可以选择在电脑上运行手机模拟器，但我一运行模拟器电脑风扇就转得厉害，所以还是用手机了。）

总之，这样的开发体验真的非常友好。而且 Expo 甚至还有一个叫做 snack 的功能，和 CodePen 很像，简单来说就是你可以新建一个 snack，然后把项目代码放进去，这样就可以在 Expo 基于网页的手机模拟器上运行你的 App 了！非常适合分享给别人。

开发与调试

前面说的都是好的开发体验，这里说一个没那么理想的体验吧。

在 web 开发中，你可以在 inspector 的 elements 标签页下查看当前的 DOM 元素，十分清晰地看到元素的大小，以及元素之间的排列和嵌套关系。

但是在 React Native 里就没有这个工具了。经常遇到的一种情况是，渲染出来的样式效果不对，但没有 inspector 不好定位元素，所以只好给你想调试的元素加上特定背景色，比如红色或者黄色这种亮眼的颜色，然后看看渲染出来的效果，这样才能在页面上定位你写的元素。

样式

上面提到了样式，这里再简单说说吧。在 React Native 里并不是用 CSS 来写样式，而是用一个叫做 StyleSheet 的东西 - 但我实在没有发现它和 CSS 有多大的不同！

简单来说，你所熟悉的那些 CSS 属性都还在！只有少部分限制或者差异，比如 React Native 里的布局都是基于 flexbox 的… 但这很好啊！

总之，只要你写过 CSS，那么 React Native 的样式你写起来就会非常顺手。

小结

React Native 真的是给了我很大的惊喜！以后如果想弄个 App 自己玩儿玩儿，一定会用 React Native，开发成本很低。