1.4.1 Windows系统下 React Native 开发环境搭建
React Native 前需要安装 Node,Python2。
安装Chocolatey
Chocolatey并不是 React Native必须的软件,它是一个Windows上的包管理器,只需要一条简单的命令,就可以完成软件的安装、更新和卸载等操作。使用这个软件可以方便的安装 Node 和 Python2。别单独去对应的官方网站下载安装即可。
以管理员的身份来运行命令提示符窗口,在命令行中输入:
@powershell -NoProfile -ExecutionPolicy Bypass -Command "iex ((new-object net.webclient).DownloadString('https://chocolatey.org/install.ps1'))" && SET PATH=%PATH%;%ALLUSERSPROFILE%\chocolatey\bin
Chocolatey 的网站可能在国内访问困难,导致上述安装命令无法正常完成。 如果你实在装不上这个工具,也不要紧。所需的 Python2 和 Node 你可以分别单独去对应的官方网站下载安装即可。
安装Python2
安装完 Chocolatey,可以在命令提示符窗口,使用Chocolatey来安装Python2,在命令行中输入:
choco install python2
目前Python最新版本是3.X ,但是并不兼容 Python2。目前React Native 不支持 Python 3版本。
安装Node
使用Chocolatey来安装Node
choco install nodejs.install
询问是否允许脚本时,输入“Y” 并按下Enter键。
安装完 Node 后,多了一个 npm 指令,npm 是 node 的包管理和分发工具,可以通过 npm 构建React Native 项目。安装完 node 后建议设置npm 国内镜像以加速后面的过程。执行命令:
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
安装Yarn、React Native的命令行工具(react-native-cli)
Yarn 是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。React Native 的命令行工具用于执行创建、初始化、更新项目、运行打包服务(packager)等任务。 执行命令:
npm install -g yarn react-native-cli
安装完 yarn 后同理也要设置镜像源:
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
安装JDK
搭建 Android 开发环境需要 Java Development Kit [JDK] 1.8或更高版本。你可以在命令行中输入 javac -version 来查看你当前安装的JDK版本。如果版本不合要求,则可以到官网上下载或百度搜索安装包。
JDK官网下载地址: http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
安装Android Studio
React Native目前需要 Android Studio2.0 或更高版本。Android Studio包含了运行和测试 React Native 应用所需的 Android SDK 和模拟器。
下载地址:https://developer.android.google.cn/studio/index.html
第一次安装的时候,选择 Custom 选项如图1-2所示
图1-2自定义安装
勾选以下选项:
- Android SDK
- Android SDK Platform
- Performance (Intel ® HAXM)
- Android Virtual Device
注意:
- 除非特别注明,请不要改动安装过程中的选项。比如Android Studio默认安装了 Android Support Repository,而这也是React Native必须的(否则在react-native run-android 时会报 appcompat-v7 包找不到的错误)。
- 确定所有安装都勾选了,尤其是 Android SDK 和 Android Device Emulator。
Android Studio 默认安装最新的 SDK,但是 React Native 需要安装 Android 6.0 (Marshmallow) SDK 。 在Android Studio的欢迎界面中选择Configure | SDK Manager,如图1-3所示。或者进入 Android Studio后, 选择"Preferences" 菜单依次进入 Appearance & Behavior → System Settings → Android SDK。 图1-3 选择SDK Manager
进入SDK界面,如图1-4所示,勾选 "Show Package Details" 确保以下选项被勾选:
- Google APIs
- Android SDK Platform 23
- Intel x86 Atom_64 System Image
- Google APIs Intel x86 Atom_64 System Image
图1-4 安装SDK23
然后点击 SDK Tools选项卡,继续勾选"Show Package Details",展开"Android SDK Build Tools" 确保"Android SDK Build-Tools 23.0.1" 被选中,如图1-5所示。 图1-5 安装SDK Build Tools
都勾选好了,点击 "Apply" 按钮开始安装。
ANDROID_HOME环境变量
打开控制面板 -> 系统和安全 -> 系统 -> 高级系统设置 -> 高级 -> 环境变量 -> 新建
确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径。如图2-5所示,具体的路径可能和图1-6不一致,请自行确认。 图1-6 配置Android环境变量
创建Android 模拟器
在Android Studio工具栏上点击 AVD Mannager 进入模拟器管理界面,创建模拟器,建议选择Android 6.0模拟器,ABI选择x86_64的模拟器效果最佳,如图1-7所示。选择完成点击"Finish"开始创建模拟器,创建完成可以打开。 图1-7 创建模拟器
测试安装
安装完成后,激动人心的时刻来的,我们可以在命令行中创建 React Native 项目了。 执行命令:
react-native init RNCode30
上述命令,会初始化一个名叫“RNCode30”的项目。该命令需要一段时间。请不要在命令行默认的System32目录中init项目,会有各种权限限制导致不能运行。 进入项目中,运行 Android 程序,执行如下命令。
cd RNCode30
react-native run-android
如果能够正常运行,显示图1-8所示内容,表示环境安装成功。
图1-8 测试运行
运行的时候会新打开一个命令窗口,这其实是打开调试环境的服务,如果不小心关闭了,需要执行 "react-native start" 重新打开。
修改项目
现在你已经成功运行了项目,我们可以开始尝试动手改一改了:
- 使用你喜欢的文本编辑器打开index.android.js并随便改上几行;
- 按两下R键,或是用Menu键(快键键ctrl+M)打开开发者菜单,然后选择 Reload JS 就可以看到你的最新修改。