开发者社区> 华章计算机> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

《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)中找到详细的介绍。

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
《React Native移动开发实战》出版啦
对不起,我来晚了 首先要感谢支持和关注我的朋友,感谢人邮的赵老师,还有公司的领导和同事,他们在我写作的过程中给了很多有用的信息,也给了很多有用的建议,为本书的写作提供了很大帮助。感谢,再次感谢!!! 工作6年多以来,一直想写一本自己的书,一方面是对自己工作经历的一个总结,也是对希望写一本书给曾经的自己一个交代,毕竟30岁的人了,搞不了几年的技术了。
1621 0
《React Native移动开发实战》一一3.3 完善轮播广告——Image组件
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第3章,第3.3节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1516 0
《React Native移动开发实战》一一3.8 实现页面间的数据传递
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第3章,第3.8节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
870 0
《React Native移动开发实战》一一3.9 小 结
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第3章,第3.9节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1048 0
《React Native移动开发实战》一一3.6 添加页面跳转功能——Navigator组件
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第3章,第3.6节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
963 0
《React Native移动开发实战》一一3.7 二级页面的跳转——TouchableOpacity组件
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第3章,第3.7节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1295 0
《React Native移动开发实战》一一3.5 拖曳刷新列表——RefreshControl组件
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第3章,第3.5节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1172 0
《React Native移动开发实战》一一3.4 完善商品列表——ListView组件
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第3章,第3.4节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
887 0
《React Native移动开发实战》一一3.2 完善搜索框功能——TextInput组件
本节书摘来自华章出版社《React Native移动开发实战》一 书中的第3章,第3.2节,作者:袁林 著 ,更多章节内容可以访问云栖社区“华章计算机”公众号查看。
1986 0
文章
问答
来源圈子
更多
+ 订阅
文章排行榜
最热
最新
相关电子书
更多
React Native 全量化实践—web 技术打造移动研发新模式
立即下载
搭建React Native生态
立即下载
React在大型后台管理项目中的工程实践
立即下载