继续创作，加速成长！这是我参加「日新方案 10 月更文应战」的第6天，点击检查活动详情
跟着敏捷化开发逐步推进，产品总是需求快速的更新换代，不断提升用户体验，但是层出不穷的硬件设备往往会带给移动开发相应的适配难题，为了机型层面的各种适配，不得不投入更多，面对这样的痛点，技能社区的跨渠道技能快速兴起，用来处理相应的问题，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
Node.js (nodejs.org)
保险起见一般运用LTS（长时间支撑版别），比较稳定，假如喜欢尝鲜也能够运用最新的
整体的装置进程比较傻瓜式，基本上直接下一步就行了，这儿就直接跳过了
装置完成后翻开指令行，输入node -v，因为默认情况下会勾选Add to Path，因而应该会得到装置的Node的版别号，这也就标明装置成功了
2.2. JDK装置
Java Downloads | Oracle
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，比较小巧有用，并且也能够很方便地进行一些自定义设置，社区的团队也比较强壮，能够供给各种方便的插件
Visual Studio Code – Code Editing. Redefined
运用其他诸如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一下，修正就立马生效了，这就是热重载技能，无需全部重新运转，加快了开发效率
而想要知晓这些技能深处的奥秘，还需一步步走下去，现在还只不过是开端——
