1、RN跨平台开发——环境搭建
了解React Native
React Native使你能够在Javascript和React的基础上获得完全一致的开发体验,构建世界一流的原生APP。React Native着力于提高多平台开发的开发效率 —— 仅需学习一次,编写任何平台。(Learn once, write anywhere)。Facebook已经在多项产品中使用了React Native,并且将持续地投入建设React Native。
搭建React Native 环境
关于安装React Native的说明可以查看React Native官方文档(http://facebook.github.io/react-native/) 官方网站会提供最新的安装参考。
首先说明下以后的技术分享均以Mac OS X系统为基础(首先你先准备一台Mac),以为我是一个地道的iOS开发者,也是一名果粉,废话不多说,进入正题你将会用到 Homebrew 一个OS X系统的通用包管理工具,用来安装 React Native的相关依赖。如果你有一台mac,那么现在就可以同时开发iOS 和Android应用。
1.1 安装Homebrew
打开 Homebrew 根据提示安装。
打开终端,打入命令安装好Homebrew 之后,运行以下命(比较耗时时):
brew install node
brew install watchman
brew install flow
React Native 包管理器同时使用了node和watchman ,如果在今后的开发过程中遇到问题,建议你更新这些依赖。flow是Facebook公司出品的一个类型检查库,它同样被React Native所采用。 如果安装过程中遇到问题,你可能需要更新brew 和相关依赖包 使用的命令行: brew update brew upgrade
如果出现错误,你需要修复本地的brew 安装程序,brew doctor 可以帮助你找到问题所在。
1.2 安装React Native
经过上面漫长的等待你已经安装好了node ,我们接下来 就可以通过npm(Node 包管理器)来安装React Native 的命令工具:
我们通过NPM安装反应母语-CLI的命令行工具。在MAC终端中输入如下命令,其中-g表示全局安装。
npm install -g react-native-cli
这个步骤将会在你的系统全局安装React Native命令行工具。
2.1 开发环境搭建(iOS- 安装Xcode)
为了开发和发布iOS应用,你需要注册一个iOS开发者账号,开发者账号分为两种:个人(99美刀/年) 企业(299美刀/年),用于后期开发完项目部署到iOS应用商店。
(1).你需要在你的mac上面安装Xcode, 它包含了Xocde 集成开发环境。iOS模拟器以及iOS SDK (软件开发工具包)。你可以从应用商店或Xcode 网站(下载地址 ) 下载。
Xcode 安装成功,接下来配置Android依赖。
2.2开发环境搭建(Android)
Android 依赖的安装步骤比较多,先推荐看下一下官方文档(https://facebook.github.io/react-native/docs/android-setup.html )里面有安装说明,需要注意的是,这些安装都是假设你从来都没有安装过Android 开发环境。
第一步:安装SDK。
第二步:安装模拟器。
第三步:创建模拟器。
首先,你需要安装SDK(Java开发工具包) 和Android SDK。
(1) 安装最新版本的JDK 下载地址:http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 如图:2.2(1)
(2) 通过终端命令:brew install android-sdk 安装Android SDK。如 图:2.2(2)
(3) 在shell配置文件中正确导出 ANDROID_HOME 环境变量 (~/.bashrc 、 ~/.zshrc 或其他shell)。
图(3).1export ANDROID_HOME=/usr/local/opt/android-sdk
Mac 下的安卓配置环境变量
(1). 找到安卓的安装路径,我们在通过终端命令安装的时候,在安装成功之后有一个我们的安装路径,我们可以直接获取到 如图(3).1
(2). 在终端输入命令.进入用户目录 $cd ~
(3). 然后输入命令,该命令的作用是如果不存在.bash_profile文件,则创建该文件 $touch .bash_profile
(4).然后输入命令,该命令的作用是用文本编辑器TextEdit打开.bash_profile文件。如果你是第一次配置环境变量,则该文档应该是空的。
$open -e .bash_profile 将export ANDROID_HOME=/usr/local/opt/android-sdk 添加到文件中。
许多Android 相关的开发任务都使用这个环境变量。需要确保添加环境变量之后执行source 命令使得配置可以立即生效。
接下来可以在终端执行 android 命令,从而打开Android SDK 管理器,选择 红色区域勾选的 如图 (3).2 进行安装。
安装会话费一些时间,接下来,我们先安装模拟器 和相关的工具,
启动一个新的 终端页面。输入命令:android 启动Android SDK管理器,我们再次安装 Intel x86 Emulator Accelerator(HAXM installer) 如图(3).3 点击install 1 package。
这些依赖包 使我们供我们创建Android虚拟设备(Android Virtual Device ,AVDs)或者模拟器 ,我们现在还未创建任何模拟器,我们接下来创建它,运行以下命令android avd
启动AVD 管理器 如图(3).4
会弹出一个创建界面 如图(3).5
图(3).5点击Create 填写创建模拟器的相关信息 如图(3).6
图(3).6图(3).7我们在这里选的 CPU/ABI 是 arm64-v8a的架构。Target 选择的是Android 7.0-API 再次之前安装环境比较慢, 只安装了Android 7.0API、Android 7.1API ,我们先创建7.0的 ,
重要的事情说三遍,确保已经勾选了Use Host GPU ,否则模拟器非常慢,确保已经勾选了Use Host GPU ,否则模拟器非常慢,确保已经勾选了Use Host GPU ,否则模拟器非常慢。
填写完信息信息,接下来启动我们的Android模拟器 ,是不是非常激动,没做过安卓的是不是感觉好神奇,如图(3).7
下面就马上出现神器的模拟器界面如 图(3).8,咱们的RN环境搭建也马上进入尾声了。
如果愿意的话,你可以创建多个AVD,Android设备种类繁多,有不同的屏幕尺寸,分辨率和功能,因此使用不同的模拟器通常能为测试带来帮助。当然我们前期以学习为目的,就先安装一个。
到此为止React Native 环境搭建完毕,有不懂的可以给我留言,希望能够帮到大家,我也是边学边写一些技术博客,分享给大家。
我将会在下一篇:创建第一个RN应用。