《React Native移动开发实战》一一1.3 搭建React Native开发环境

简介: 本节书摘来自华章出版社《React Native移动开发实战》一 书中的第1章,第1.3节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。

1.3 搭建React Native开发环境
  “磨刀不误砍柴工”,在正式开发React Native应用之前,需要先搭建好React Native的开发环境。搭建React Native开发环境有以下几个主要步骤。

1.3.1 安装原生开发工具——Android
  由于React Native应用仍然是基于原生平台(参考本书1.1.节React Native的结构),所以搭建React Native的前提是安装原生开发工具。
  (1)安装Java Development Kit(JDK),从JDK官网(http://www.oracle.com/technetwork/ java/javase/downloads/jdk8-downloads-2133151.html)下载操作系统相应版本安装即可。安装成功后可以通过如图1.10所示的方法进行验证。
image

图1.10 查看JDK安装是否成功及Java版本号
  (2)再安装Android开发工具:Android Studio and SDK Tools。从Android Studio官网(https://developer.android.com/studio/index.html)分别下载Android Studio及命令行工具Android SDK Tools。
?提示:国内网络情况下访问Android相关网站较慢,所以读者可以搜索国内的Android资源网站进行下载。
  (3)第一次打开Android Studio时,需要在“设置”中配置Android SDK Tools的路径Android SDK Location,如图1.11所示。
image

  (4)成功配置Android SDK Tools的路径之后,还要下载和安装SDK相关工具,如图1.12所示。
image

  (5)此时,还需要将Android SDK Tools的路径加入到系统变量PATH中。
?提示:无论是JDK,还是Android SDK Tools,以及以后要安装的其他开发工具(如Node.js、npm、React Native等),根据实际情况,都需要添加到系统变量PATH中,否则会发生找不到该工具或命令的错误。当然,有时候安装程序会自动完成该配置,请读者知悉。
  对于Linux或macOS系统,将下面的配置添加到~/.bashrc文件中。

export ANDROID_HOME=/path/to/android/sdk/tools
export PATH=${PATH}:${ANDROID_HOME}/tools
export PATH=${PATH}:${ANDROID_HOME}/platform-tools

  对于Windows系统,将下面的路径添加到环境变量PATH中。

  • Android SDK Tools文件夹路径。
  • Android SDK Tools文件夹里的tools文件夹路径。
  • Android SDK Tools文件夹里的platform-tools文件夹路径。
      添加效果如图1.13所示。

image

图1.13 添加Android SDK Tools路径到Windows系统变量PATH
?提示:如果正确配置之后,还是找不到Android SDK Tools工具或命令,可以尝试重新加载环境变量或重启终端。
1.3.2 安装原生开发工具——iOS
  首先需要再次提醒读者的是,使用React Native开发iOS应用是需要macOS的,所以经济条件允许的话,最好购置一台Mac电脑。只有在使用React Native同时开发iOS和Android应用,才能发挥出React Native跨平台的优势。
  Xcode的安装比较简单,在macOS中登录Apple ID后,打开App Store搜索Xcode安装即可,如图1.14所示。
?注意:请务必在Apple官网或App Store下载Xcode安装程序。2015年9月发生的轰动国内的XcodeGhost事件,起因就是因为开发者下载并使用了非官方被植入非法代码的Xcode安装程序。
image

图1.14 在App Store中查找并安装Xcode
1.3.3 安装Node.js
  打开Node.js官网的下载页面(https://nodejs.org/en/download/),下载当前系统对应的安装包,这里以macOS系统为例,下载的安装包为node-v6.9.2.pkg。
?提示:推荐读者使用最新的LTS版本,因为官方维护的周期较长,功能和稳定性较好。
  (1)下载完成后双击安装包进行安装,如图1.15所示。
  (2)根据安装向导提示,单击相应的“继续”或“同意”按钮,最后单击“安装”按钮进行安装。安装成功后,如图1.16所示。

![image](https://yqfile.alicdn.com/d19370732716901c0057d7b1fc5dc9f66ddfe004.png)

图1.15  安装Node.js    图1.16  Node.js安装成功

  在图1.16中,需要注意以下有用的信息。

  • Node.js的安装路径:/usr/local/bin/node。
  • npm的安装路径:/usr/local/bin/npm。
  • 保证/usr/local/bin添加到了系统变量$PATH中。
    ?提示:Node.js在Windows系统上的安装过程和macOS相同,并且Node.js的Windows安装包默认还会自动将安装好的工具和命令的路径添加到环境变量PATH中。

  (3)通过如图1.17所示方法验证安装是否成功。
image

图1.17 查看Node.js、npm安装路径及版本号
?小知识:实际开发中通常使用nvm(https://github.com/creationix/nvm)安装和管理Node.js,并且使用cnpm(https://npm.taobao.org/)来代替npm,这是因为cnpm使用的是淘宝源,下载的速度较快。
1.3.4 安装React Native
  在Node.js及npm安装好之后,终于可以进入主题:安装React Native了。安装React Native就是安装React Native的命令行工具,由于前面已经安装好Node.js及npm,安装React Native就非常简单了。使用如下命令即可:

npm install -g react-native-cli

?提示:如果使用npm下载速度较慢的话,可以使用cnpm代替npm,即cnpm install -g react-native-cli。
  安装完成后,可以通过如图1.18所示方法验证是否成功。
image

图1.18 查看react-native命令行工具帮助和版本号
1.3.5 安装其他辅助工具
  安装完以上所有工具后,理论上已经可以开始React Native开发之旅了,但在实际开发中,还有一些必备的高效生产工具,在这里推荐读者也安装一下。
  1.Nuclide开发工具
  Nuclide(https://nuclide.io/)是Facebook官方推出的一款React Native开发工具。从严格意义上说,Nuclide并不是一款独立的编辑器,它只是基于Atom(https://atom.io/)的一个扩展,所以本书在后面的讨论中,并不严格区分Nuclide和Atom。
  当然,读者在了解React Native和Nuclide之前,肯定已经有自己熟悉的JavaScript的开发工具,如Sublime Text(http://www.sublimetext.com/)、WebStorm(https://www.jetbrains. com/webstorm/)等,但是笔者还是强烈推荐Nuclide,原因如下。

  • 官方出品,对React Native新特性及开发、调试支持更好。
  • 基于Atom,拥有了庞大的第三方插件库。
      Nuclide的安装过程如下:
  • 从Atom官网(https://atom.io/)下载最新版本的Atom。
  • 打开Atom,选择Settings|Install Packages命令,搜索并安装Nuclide,如图1.19所示。
    image

图1.19 安装Nuclide
  2.Chrome浏览器
  Chrome浏览器是React Native开发的远程调试工具,安装比较简单,这里就不介绍了。在Chrome浏览器安装完成后,还需要在Chrome的应用商店中安装这款Chrome插件:React Developer Tools,如图1.20所示。
?提示:和Android的问题一样,国内网络情况下访问Chrome相关网站也较慢,所以读者可以搜索国内的其他资源网站进行下载和安装。
image

图1.20 安装Chrome插件React Developer Tools
  3.Watchman工具
  Watchman(https://facebook.github.io/watchman/docs/install.html)是由Facebook提供的监视文件系统变更的工具,它可以提高开发时的性能(捕捉文件的变化从而实现实时刷新)。
  macOS系统的安装比较简单,使用HomeBrew(http://brew.sh/)工具即可快速完成安装,安装命令如下:

brew update
brew install watchman

?小知识:HomeBrew是macOS平台上的软件包管理工具,拥有安装、卸载、更新、查看和搜索软件包等很多实用的功能。
  Linux系统需要下载源码自己编译安装,方法也很简单,安装命令如下:

git clone https://github.com/facebook/watchman.git
cd watchman
git checkout v4.7.0 # the latest stable release
./autogen.sh
./configure
make
sudo make install

  Windows系统上的Watchman现在还处于Alpha内部测试阶段,对系统也有限制,例如,仅支持Windows x64 on Windows Server 2012 R2以及之后的最新Windows版本。如果读者想抢先体验的话,可以在Watchman项目的问题19(https://github.com/facebook/watchman/ issues/19)中找到详细的介绍。

相关文章
|
2月前
|
开发框架 前端开发 JavaScript
探索前端开发中的跨平台框架React Native
本文将介绍前端开发中一种备受关注的跨平台框架React Native,通过比较原生应用与React Native的优缺点,探讨其在实际项目中的应用以及未来发展趋势。
|
2月前
|
开发框架 前端开发 JavaScript
从零开始学习React Native开发
React Native是一种基于React框架的移动端开发框架,使用它可以快速地构建出高性能、原生的移动应用。本文将从零开始,介绍React Native的基础知识和开发流程,帮助读者快速入门React Native开发,并实现一个简单的ToDo应用程序。
|
3月前
|
前端开发 JavaScript Android开发
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
跨端技术栈综合考察:深入剖析 UniApp、Flutter、Taro 和 React Native 的优势与限制
|
3月前
|
前端开发 安全 Swift
【教程】React Native 应用中的代码混淆与安全性管理
【教程】React Native 应用中的代码混淆与安全性管理
46 0
|
2月前
|
存储 前端开发 JavaScript
从零开始学习React Native开发
【2月更文挑战第1天】React Native是一种跨平台的移动应用程序框架,可以使用JavaScript和React来构建Android和iOS应用程序。本文将带您从零开始学习React Native开发,涵盖了基础知识、组件、样式、布局、API等方面。
|
2月前
|
前端开发 IDE 小程序
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
【社区每周】React Native 初探;应用中支持添加应用管理员(2月第一期)
34 0
|
3月前
|
移动开发 前端开发 JavaScript
探究移动端混合开发技术:React Native、Weex、Flutter的比较与选择
移动端混合开发技术在移动应用开发领域日益流行,为开发者提供了更高效的跨平台开发方案。本文将比较三种主流混合开发技术:React Native、Weex和Flutter,从性能、生态系统和开发体验等方面进行评估,以帮助开发者在选择适合自己项目的技术时做出明智的决策。
|
3月前
|
移动开发 前端开发 weex
React Native、Weex、Flutter 混合开发技术的比较与选择
移动应用已经成为人们日常生活中不可或缺的一部分,而混合开发技术也随之崛起并逐渐成为主流。本文将比较 React Native、Weex 和 Flutter 三种混合开发技术,并探讨它们各自的优缺点,以及如何根据项目需求做出选择。
53 1
|
3月前
|
开发框架 Dart 前端开发
Flutter vs React Native:跨平台移动应用开发的终极对决
随着移动应用的普及,跨平台移动应用开发成为了一种趋势。Flutter和React Native是当前最受欢迎的跨平台开发框架之一,但它们各自有着不同的特点和优势。本文将对Flutter和React Native进行全方位比较,以帮助开发者了解两个框架的差异,从而选择适合自己的开发工具。
40 3
|
3月前
|
开发框架 前端开发 JavaScript
react native是什么,怎么用
react native是什么,怎么用
44 0