React Native 跨平台之旅（一）—— 准备
随着敏捷化开发逐渐推进，产品总是需要快速的更新换代，不断提升用户体验，但是层出不穷的硬件设备往往会带给移动开发相应的适配难题，为了机型层面的各种适配，不得不投入更多，面对这样的痛点，技术社区的跨平台技术快速兴起，用来解决相应的问题，React Native便是其中重要的一份子
1. 简介
React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，支持iOS和安卓两大平台
可以看出React Native是致力于跨平台开发的框架，并且是前端JS框架React的扩展，对于原生的移动平台进行了更好的兼容和封装，以此来减少移动端设备兼容所需要投入的成本
这也就契合了React Native官网的标语“一次学习，到处编写”
2. 环境搭建
关于这门技术究竟如何，还是亲自体验最直接，因此直接开始准备搭建所需的环境，尝试一下吧
这里我打算以Android平台为主，毕竟Windows上不能使用XCode，之后可以将开发好的项目放到Mac上，体验一下iOS的效果，除此之外，二者间的差距应该不会太大
关于React Native的语言环境需要用到Node、JDK Node主要是支持JS以及相关依赖的下载构建，必不可少 JDK是用于支持Android平台的原生JVM的语言
2.1. 安装Node.js
保险起见一般使用LTS（长期支持版本），比较稳定，如果喜欢尝鲜也可以使用最新的
整体的安装过程比较傻瓜式，基本上直接下一步就行了，这里就直接跳过了
安装完成后打开命令行，输入node -v，由于默认情况下会勾选Add to Path，因此应该会得到安装的Node的版本号，这也就表明安装成功了
2.2. JDK安装
Oracle的官网上可以找到对应的JDK安装包，直接下载，然后根据提示下一步就行了
然后使用java --version查看一下，这里是我之前装的另外一个版本
2.3. Android Studio安装
这里给出了两个选择，如果平时使用JetBrains的产品比较多，推荐使用Toolbox这个平台进行安装，统一管理做的不错，升级也方便，如果觉得没有必要则可以直接去Android的开发者官网下载
JetBrains Toolbox App：轻松管理您的工具 Download Android Studio & App Tools - Android Developers (google.cn)
安装过程比较简单，如有不清楚也可以查阅文档，里面有视频指导
安装 Android Studio | Android 开发者 | Android Developers (google.cn)
2.4. 编写代码的工具
React Native主要是使用JS语言进行编写，对于编写代码的工具个人比较推荐VS Code，比较小巧实用，并且也可以很方便地进行一些自定义设置，社区的团队也比较强大，可以提供各种方便的插件
使用其他诸如WebStorm，Sublime等也可以，无非是编写代码，工具趁手就Ok
3. 项目创建
环境等准备得差不多了，接下来就可以开始第一个项目的创建了，先熟悉一下流程还是很重要的
首先，准备一个空的目录，用作项目存放的根目录
使用cd命令切到目录当中，一会儿项目文件夹会生成在这里
在当前目录输入npx react-native init FirstApp命令初始化一个名为FirstApp的项目（名称自己换），这个命令就是用于搭建React Native项目脚手架的命令
这个时候会使用Node的包管理工具从云端仓库拉取项目初始化需要依赖的资源，等待一会儿
等到命令提示符变得可交互时，初始化便完成了，可以看到React的大Logo
现在查看目录的内容，可以看到多出了刚刚创建的项目的目录，直接cd进入目录
在项目的根目录下可以看到刚刚npx开头的命令把大致的项目结构已经搭建完毕了，这便是通常的React Native项目的项目目录结构
现在在当前目录下输入code .命令，表明在当前目录打开VS Code，如果之前安装的时候进行了命令的关联就可以直接打开
现在就进入到了VS Code的界面，左侧便是刚刚的项目的文件目录，至此，项目的创建便完成了
4. 设备或模拟器准备
React Native是用于进行进行移动开发的，因此需要运行在手机或者是对应的模拟器上
4.1. 连接真机
连接Android手机的真机通常需要开启adb工具，这个一般在Android Studio中就会安装，也可以单独下载
需要用USB线将手机连接到开发的电脑上，并且与开发的电脑连接同一个网，在对应的手机上需要找到开发者模式并打开，这一点可能不同的手机打开有区别，遇到问题具体的可以根据手机品牌型号百度一下，通常是需要连点系统版本号
开启开发者模式后，找到并进入开发者模式的配置，打开其中的USB调试功能，此时可以接通（具体选择仅充电还是文件传输等模式可以挨个试下），会弹出USB调试的授权弹框，点击确定即可
使用adb start-server启动adb服务，并且输入adb devices查看可用设备，也可以直接打开Android Studio
这就连上了
4.2. 连接模拟器
Android Studio内部有模拟器，也可以使用一些其他平台的，比如MuMu或者是夜神的
在Android Studio的右上角找到这样一个图标，然后点击，选择自己需要的配置进行创建
具体的不一一介绍了，官方文档里应该可以搜到
5. 运行
这里建议使用npm下载yarn工具集，可以优化命令操作
npm是Node的包管理器，Facebook使用yarn进行了替代与优化
现在使用yarn来运行代码，如果是Android平台，直接运行yarn android
构建成功之后就可以看到程序在模拟器上运行，输出了欢迎页
现在，运行在设备端的内容成为了JS代码，对应的代码主要位于App.js当中，在React Native的概念中，这是一个组件，页面的构成正是通过组件的拼接与堆叠构成
现在来进行简单的修改
然后Ctrl + S一下，修改就立马生效了，这便是热重载技术，无需全部重新运行，加快了开发效率 而想要知晓这些技术深处的奥秘，还需一步步走下去，现在还只不过是开始——