React Native介绍及开发环境<Mac搭建

简介

这是一个RN的上手课程。长期更新。包括对官方文档的解读。

曾经有这么一个说法:世上凡能用JavaScript实现之事物,最后都用JavaScript实现了。

笔者在八月底十天的找工作时间内,和不下5个hr沟通过所谓”用js写原生应用开发”,愈发深刻感受到使用js来写移动app已经成为了一个热门的前端技能。3-5年经验的前端,能写混合开发的web前端相当难找。招聘甚至不敢要求前端一定要会,多数时候需要在react基础上,入职以后再上手——是的,岗位要求需要懂更多react,而不是vue。而光是这个条件就筛掉很多人了。对于所谓的中小公司来说,有一个注重应用的app几乎用不上原生安卓开发出马。

当然,现在的技术框架更多了。从早期的backbone到reactNative到weex再到flutter,各种框架下写移动应用的内核层出不穷,但是如果要求你用javscript写app,RN仍然是企业级最广泛稳定的移动端开发框架。

历史沿革

在 React Native 出现前,业界通常会选择三种移动技术(Native App、HTML5、Hybrid)之⼀进⾏移动应用开发。

Native App(原生app):开发原⽣应⽤自然性能最好,功能强⼤。但多平台版本的开发、维护要花费大量的人力物力(iOS版本迭代审核需要时间)。

HTML5(web app):虽然拥有 Web 的优势——即灵活的布局能⼒、免发版的敏捷迭代潜⼒、优秀的跨平台特性。可以在新闻资讯等⼀一些强排版、弱交互的展示类 应用 上大展拳脚。但由于 WebView 在移动设备上的性能制约,始终难成⼤器。

Hybrid App(混合开发):JS+Native两者相互调⽤为主,从开发层面实现“一次开发,多处运⾏”的机制,成为 真正适合跨平台的开发。Hybrid App兼具了了Native App良好⽤用户体验的优势,也兼具了了Web App 用HTML5跨平台开发低成本的优势,但是这个⽅法存在诸多问题,比如无法访问离线数据、⽆法访问设备、⽆法远程更新等等。

RN来了

2015年,Facebook在React.js Conf 大会上推出了一个用于开发Android和iOS App的框架,主要编程语言是JavaScript。它的出现使应用拥有了Native的用户体验,又保留了React的开发效率。

React Native 的底层引擎是 JavaScript内核,但调⽤的是原⽣的组件⽽非 HTML5 组件。这样运⾏时可以做到与 Navive App 相媲美的性能体验,同时因为 JavaScript 代码可以使用后端强⼤的 Web 方式管理,既可以做到⾼效开发,也可以实现快速部署和问题热修复

于是你可以只用JavaScript来编写原生移动应用。它在设计原理上和React一致,通过声明式的组件机制来搭建丰富多彩的用户界面,并且适配到android和ios机型上。

React Native产出的并不是“网页应用”, 或者说“HTML5应用”,又或者“混合应用”。最终产品是一个真正的移动应用,从使用感受上和用Objective-C或Java编写的应用相比几乎是无法区分的。React Native所使用的基础UI组件和原生应用完全一致。你要做的就是把这些基础组件使用JavaScript和React的方式组合起来。

React Native优缺点

做一件事情之前,必须深刻了解它的优点和缺点。首先看看优点 :

跨平台开发:运用React Native,我们可以使⽤同⼀份业务逻辑核⼼代码来创建原生应⽤:运⾏在 Web端,Android端和iOS端;

追求极致的用户体验:实时热部署;

learn once,write everywhere:React Native不强求⼀一份原⽣生代码⽀持多个平台,所以不不是write once,run anywhere;

然后是缺点 :

reactnative在iOS上仅⽀支持iOS7以上,Android仅支持Android4.1以上;

开发初期成本较高(配置麻烦);

部分复杂的界⾯面和操作,RN无法实现(可以考虑引入原⽣补充实现不了的功能);

RN的搭建配置非常繁琐,值得用一篇文章去说。笔者将就Mac版安装进行记录。

建议的开发配置

在windows机上搞苹果开发可以尝试运行黑苹果系统,但据说很伤机器,而且电脑也不便宜。如果要开发苹果应用,Mac机是少不了的。

因此RN如果要做全套,起码需要一台MBP+一台iphone+一台安卓机。

此外ios开发者账号是要钱的(每年800+)。所以本系列文章都会以安卓开发为主。

准备

假如安装node10以上版本。那么需要尝试加速一下你的npm(不要使用cnpm)

使用homebrew安装Watchman:

Watchman则是由 Facebook 提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager 可以快速捕捉文件的变化从而实现实时刷新)。

安装yarn 和rn脚手架:

Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。

安装之后再设置一下源:

安装完 yarn 之后就可以⽤ yarn 代替 npm 了,例如⽤ yarn 代替 npm install 命令,用 代替 。

安卓开发环境

安装JDK(Java Development Kit)

React Native 需要 Java Development Kit [JDK] 1.8(暂不支持 1.9 及更高版本,Java SE 8.0)。那就去官网下载一个:

https://www.oracle.com/java/technologies/jdk8-downloads.html

安装完毕后执行:

可以打印出信息就成功了。

安装 Android Studio

去下载:http://www.android-studio.org/

安装界面中选择”Custom”选项,确保选中了以下几项:

然后点击”Next”来安装选中的组件。

安装android sdk

Android Studio 默认会安装最新版本的 Android SDK。目前编译 React Native 应用需要的是版本的 SDK(注意 SDK 版本不等于终端系统版本,RN 目前支持 android4.1 以上设备)。你可以在 Android Studio 的 SDK Manager 中选择安装各版本的 SDK。

你可以在 Android Studio 的欢迎界面中找到 SDK Manager。点击”Configure”,然后就能看到”SDK Manager”。

在 SDK Manager 中选择”SDK Platforms”选项卡,然后在右下角勾选”Show Package Details”。展开选项,确保勾选了下面这些组件():

(官方模拟器镜像文件,使用非官方模拟器不需要安装此组件)

然后点击”SDK Tools”选项卡,同样勾中右下角的”Show Package Details”。展开”Android SDK Build-Tools”选项,确保选中了 React Native 所必须的版本。你可以同时安装多个其他版本。

最后点击”Apply”来下载和安装这些组件(原有的确保安装即可,全选其实不可能。)

配置 ANDROID_HOME 环境变量

React Native 需要通过环境变量来了解你的 Android SDK 装在什么路径,从而正常进行编译。

具体的做法是把下面的命令加入到文件中:

译注:~表示用户目录,即,而小数点开头的文件在 Finder 中是隐藏的,并且这个文件有可能并不存在。可在终端下使用命令创建或编辑。如不熟悉 vi 操作,请点击这里学习。

如果你的命令行不是 bash,而是例如 zsh 等其他,请使用对应的配置文件。

使用命令来使环境变量设置立即生效(否则重启后才生效)。可以使用检查此变量是否已正确设置。

请确保你正常指定了 Android SDK 路径。你可以在 Android Studio 的”Preferences”菜单中查看 SDK 的真实路径,具体是Appearance & BehaviorSystem SettingsAndroid SDK

ios开发环境

首先你得安装xcode。

xcode(6.1G):它是开发iphone,ipad,iwatch,MacOS的IDE。

React Native 目前需要Xcode 9.4 或更高版本。你可以通过 App Store 或是到Apple 开发者官网上下载。这一步骤会同时安装 Xcode IDE、Xcode 的命令行工具和 iOS 模拟器。

可以在应用商店免费下载,也可以到官网去下:https://developer.apple.com/download/more/

Xcode 的命令行工具

启动 Xcode,并在菜单中检查一下是否装有某个版本的。Xcode 的命令行工具中包含一些必须的工具,比如等。

尝试一下

创建目录:

准备设备

你需要准备一台 Android 设备来运行 React Native Android 应用。这里所指的设备既可以是真机,也可以是模拟器。推荐开发环境:Mac系统 + ⼀一部廉价的安卓⼿手机

测试adb连接 (安卓)

1.开启USB调试

在默认情况下 Android 设备只能从应⽤用市场来安装应⽤用。你需要开启 USB 调试才能⾃自由安装开发版的 APP。确定你已经打开设备的 USB 调试开关。

2.通过USB数据线连接设备

下⾯检查你的设备是否能正确连接到 ADB(Android Debug Bridge),使⽤ adb devices 命令:

当你看到下面有设备列表时,就说明连接成功了。

注意,你每次只应当连接⼀一个设备。连接真机时应当关掉模拟器。

第一个安卓应用

这时候回到你的应用,执行编译命令:

如果是第一次编译,这是一段相对比较长的编译等待

编译完成后,手机收到安装请求,手机上看到这个页面,表示已经安装成功了。

第一个ios应用

ios不用做什么配置,直接即可运行。

这时候在ios模拟器上就会看到当前的程序。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20190907A08WXA00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券