React Native 跨平台之旅（一）—— 准备

0xMinos
2,321 阅读6分钟

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第6天，点击查看活动详情

随着敏捷化开发逐渐推进，产品总是需要快速的更新换代，不断提升用户体验，但是层出不穷的硬件设备往往会带给移动开发相应的适配难题，为了机型层面的各种适配，不得不投入更多，面对这样的痛点，技术社区的跨平台技术快速兴起，用来解决相应的问题，React Native便是其中重要的一份子

1. 简介

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，支持iOS和安卓两大平台

可以看出React Native是致力于跨平台开发的框架，并且是前端JS框架React的扩展，对于原生的移动平台进行了更好的兼容和封装，以此来减少移动端设备兼容所需要投入的成本

image.png

这也就契合了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)

image.png

保险起见一般使用LTS（长期支持版本），比较稳定，如果喜欢尝鲜也可以使用最新的

整体的安装过程比较傻瓜式，基本上直接下一步就行了，这里就直接跳过了

image.png

安装完成后打开命令行，输入node -v，由于默认情况下会勾选Add to Path，因此应该会得到安装的Node的版本号，这也就表明安装成功了

2.2. JDK安装

Java Downloads | Oracle

image.png

Oracle的官网上可以找到对应的JDK安装包，直接下载，然后根据提示下一步就行了

然后使用java --version查看一下，这里是我之前装的另外一个版本

image.png

2.3. Android Studio安装

这里给出了两个选择，如果平时使用JetBrains的产品比较多，推荐使用Toolbox这个平台进行安装，统一管理做的不错，升级也方便，如果觉得没有必要则可以直接去Android的开发者官网下载

JetBrains Toolbox App：轻松管理您的工具
Download Android Studio & App Tools - Android Developers (google.cn)

image.png

image.png

安装过程比较简单，如有不清楚也可以查阅文档，里面有视频指导

安装 Android Studio  |  Android 开发者  |  Android Developers (google.cn)

2.4. 编写代码的工具

React Native主要是使用JS语言进行编写，对于编写代码的工具个人比较推荐VS Code，比较小巧实用，并且也可以很方便地进行一些自定义设置，社区的团队也比较强大，可以提供各种方便的插件

Visual Studio Code - Code Editing. Redefined

image.png

使用其他诸如WebStorm，Sublime等也可以，无非是编写代码，工具趁手就Ok

3. 项目创建

环境等准备得差不多了，接下来就可以开始第一个项目的创建了，先熟悉一下流程还是很重要的

首先，准备一个空的目录，用作项目存放的根目录

image.png

使用cd命令切到目录当中，一会儿项目文件夹会生成在这里

image.png

在当前目录输入npx react-native init FirstApp命令初始化一个名为FirstApp的项目（名称自己换），这个命令就是用于搭建React Native项目脚手架的命令

image.png

这个时候会使用Node的包管理工具从云端仓库拉取项目初始化需要依赖的资源，等待一会儿

image.png

等到命令提示符变得可交互时，初始化便完成了，可以看到React的大Logo

image.png

现在查看目录的内容，可以看到多出了刚刚创建的项目的目录，直接cd进入目录

image.png

在项目的根目录下可以看到刚刚npx开头的命令把大致的项目结构已经搭建完毕了，这便是通常的React Native项目的项目目录结构

现在在当前目录下输入code .命令，表明在当前目录打开VS Code，如果之前安装的时候进行了命令的关联就可以直接打开

image.png

现在就进入到了VS Code的界面，左侧便是刚刚的项目的文件目录，至此，项目的创建便完成了

4. 设备或模拟器准备

React Native是用于进行进行移动开发的，因此需要运行在手机或者是对应的模拟器上

4.1. 连接真机

连接Android手机的真机通常需要开启adb工具，这个一般在Android Studio中就会安装，也可以单独下载

需要用USB线将手机连接到开发的电脑上，并且与开发的电脑连接同一个网，在对应的手机上需要找到开发者模式并打开，这一点可能不同的手机打开有区别，遇到问题具体的可以根据手机品牌型号百度一下，通常是需要连点系统版本号

开启开发者模式后，找到并进入开发者模式的配置，打开其中的USB调试功能，此时可以接通（具体选择仅充电还是文件传输等模式可以挨个试下），会弹出USB调试的授权弹框，点击确定即可

使用adb start-server启动adb服务，并且输入adb devices查看可用设备，也可以直接打开Android Studio

image.png

这就连上了

4.2. 连接模拟器

Android Studio内部有模拟器，也可以使用一些其他平台的，比如MuMu或者是夜神的

image.png

在Android Studio的右上角找到这样一个图标，然后点击，选择自己需要的配置进行创建

image.png

具体的不一一介绍了，官方文档里应该可以搜到

5. 运行

这里建议使用npm下载yarn工具集，可以优化命令操作

image.png

npm是Node的包管理器，Facebook使用yarn进行了替代与优化

现在使用yarn来运行代码，如果是Android平台，直接运行yarn android

image.png

构建成功之后就可以看到程序在模拟器上运行，输出了欢迎页

现在，运行在设备端的内容成为了JS代码，对应的代码主要位于App.js当中，在React Native的概念中，这是一个组件，页面的构成正是通过组件的拼接与堆叠构成

现在来进行简单的修改

image.png

然后Ctrl + S一下，修改就立马生效了，这便是热重载技术，无需全部重新运行，加快了开发效率
而想要知晓这些技术深处的奥秘，还需一步步走下去，现在还只不过是开始——

avatar
文章
阅读
粉丝