Windows+Mac下ReactNative环境搭建

2016-09-13 本文已影响553人 Hank_谢旱

1.RN的环境配置

1.1 Windows的RN环境配置

软件需要

注意电脑位数是32/64位对应的软件可能会不同。

1.1.1 Nodejs

Nodejs是ReactNative 的运行基础。

下载链接：https://nodejs.org/en/download/，可以根据自己电脑系统位数选择下载。

安装过程中，选择默认的安装方法即可，安装目录可以自己选择，选择C盘或者其他盘。如果node目录不在系统环境变量PATH中（目前的nodejs是默认设置好的），需要设置下，如果node安装目录是C:\nodejs，那么如下设置：

PATH新增路径;C:\nodejs。

如果安装并设置好路径，可以在终端中输入node -v查看到nodejs的版本号。

1.1.2 Git

GIt用于代码管理，与svn类似的工具，同时在ReactNative中会用Git获取githup上的部分依赖。

下载链接：https://git-scm.com/downloads，可以根据自己电脑系统位数选择下载。

安装完成后，需要设置系统环境变量。如果Git安装目录是C:\Git，那么需要进行如下设置：PATH新增路径;C:\Git\bin

1.1.3 JDK

JDK是Java的运行环境

下载链接：

http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html选择合适版本下载。

安装后需要设置下系统环境变量，如果JDK安装目录是C:\Jdk，那么需要如下设置：

新增环境变量JAVA_HOME设置为C:\Jdk

新增环境变量CLASSPATH设置为.;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar

环境变量PATH新增路径;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin

设置完成之后，可以在命令行输入java -version查看，若出现以下jdk的版本号，则jdk设置正确。

1.1.4 Android Studio

Android Studio是用于Android sdk等等的管理，也是Android开发工具。

下载地址：http://www.android-studio.org/index.php/download选择自己需要的版本下载，下载的安装程序包含了Android SDK，过程中会对SDK进行解压，3G大小，请注意盘符空间是否够。

安装后需要设置系统环境变量。

如果安装的路径是D:\Program Files\Android\sdk，则需要如下设置：

新增变量ANDROID_HOME为D:\Program Files\Android\sdk

在PATH变量中新增路径

;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;

之后可以在命令行输入adb查看是否安装成功。

1.1.5 Genymotion

该工具是安卓虚拟机，它依赖VirtualBox的引擎。安装过程中也会安装VirtualBox。

下载地址：http://pan.baidu.com/s/1btavqY

Genymotion需要注册一个帐号(注册入口)，之后个人就可以免费使用了，也会提供很多版本的手机Model供选择。

可以点击Add新建一个模拟器，切记一定要在Settings中ADB下设置SDK的路径。

1.1.6安装react-native命令工具

在命令行中安装react-native-cli，如下：

安装过程可能会比较慢，可以从国内的包管理拉取。npm install -g react-native-cli --registry=https://registry.npm.taobao.org

安装完成以后，react-native在终端就可以使用了。

1.1.7安装Sublime Text3

Sublime Text3用于对RN代码的编写。

下载地址：http://www.sublimetext.com/3

1.2 Mac的RN环境配置

1.2.1所需软件

安装步骤基本与Windows系统一致，所需软件在上述提供的链接中选择合适版本安装。并且Mac下安装上述软件不需手动配置环境变量，系统会自动配好。Genymotion可选择安装。

1.2.2 Xcode

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

虽然一般来说命令行工具都是默认安装了，但你最好还是启动Xcode，并在Xcode | Preferences | Locations菜单中检查一下是否装有某个版本的Command Line Tools。Xcode的命令行工具中也包含一些必须的工具，比如git等。

2.RN基础

2.1认识RN

下面是从搜狐上看到的一片文章，可以看看，了解一下到底什么是RN。

React Native-目前最火的前端技术

做为一名产品经理，你是否遇到过这样的窘境，“帮我把字体调成16号呗，颜色变成#FFFF00FF，老大说这里最好改一下”，作为一名app的开发只能无奈但心里窃喜的告诉你，“只能等下个版本了，必须要重新发布才能改”，如果你问为什么不能改了就生效啊，那说明你对技术的理解要么真的很差，要么你就是知道这项React-Native新技术所爆发出来的力量。

React Native是Facebook推出的一个用Java语言就能同时编写ios，android，以及后台的一项技术，2015年9月发布了android版本，又在程序员里面掀起了一波小高潮，不断有喜欢尝鲜的程序员投入到这个领域。

用大白话说，就是从此一名程序员自己就可以创业了，他只用这一门技术，就可以同时写出androidapp，ios app，以及后台应用程序，并且，请注意这里，它可以做到实时热更新（就像网页一样，改了一个字体，随时可上线），app也能做到随时都能更新了，第一段讲的那个需求可以分分钟秒杀解决，不用新发版本，只需在服务器改动一下代码即可，是不是很牛逼，是不是很牛逼，是不是很牛逼，真的很牛逼。

到这里，你只需要理解一句话，就是Facebook提供了一套解决方案，它利用Java作为开发语言，可以同时来编写前端，移动终端，后台应用程序。

我们再来讲讲，为什么React Native受到了如此大的关注，以及它的优越性到底在什么地方。

目前，一个成熟的互联网产品基本囊括了：移动终端和网页两种主要形态。在移动终端app和网页的开发历程中，涉及了很多技术角色：前端开发（俗名叫做网站的），移动终端开发（android和ios开发，现在满大街都是），后台开发（他们的程序大多没有界面，主要是为网页和app提供数据和保障服务的稳定性），每个角色各司其职，分别需要不同的技能，比如前端开发需要精通html，css，java这些基本的web语言知识。Android开发用Java（这个词读“扎瓦”，别读成了“加瓦”，读成这样很Low B的）语言编写，ios开发用Objective-c（把他想象成当年过计算机二级的那个C语言就可以了）编写。后台开发，有的公司用Java，有的公司用C++，用啥的都有，能满足性能需要就可以了。

已经看崩溃了吧，对于一个非计算机专业的人，根本不会理解他妈的为什么要存在这么多语言，为什么这里要用C语言，那里要用C++，有的地方要用Python，而又有很大的一个人群对你高呼：“PHP才是世界最好的语言”。其实他们每种语言都有不同的使用场景，有的语言效率高，有的语言语法更简洁漂亮，有的是专为后台而生，有的是特定场景下的唯一选择。如果你还听不懂，我们就用大白话做个比喻，为什么避孕套有的是螺纹的，有的是颗粒的，有的是延时的，有的是超薄的，还有一个品牌号称一只手就可以打开的，它们也都是依据个人身体状态，以及不同场景分别发挥各自的强项。你随便类比，任何一个领域，都有很多不同的工具来满足不同的场景，是需求决定了当前状态。

现在好了，React整套解决方案完成了江湖统一，FaceBook也号称这们技术是“Learn Once，Write AnyWhere”，学习成本只有一次，却完成了所有开发角色的统一。

这意味着：

1.app将来都是可像网页一样热更新，随时发布。

2.对于一名开发人员，将再也没有前端，终端，后台的区分，他所关注的就是做一整套应用程序，人力将得到最大幅度的整合与释放。

3.代码复用将会是主旋律，因为是一种语言，大家重复造轮子的成本会越来越节省。

目前，React Native也还是有一些缺点的，比如他的sdk组件包size还比较大，crash还比较多，在ios上支持的内容已经相当不错，android还属于初级阶段，但是目前最新的版本也才是0.16，相信再过一年，一定会牛逼闪闪。

2.2 Reactjs基础学习

在正式学习RN之前，建议先学一些Reactjs的内容，对一些方法有一个认识，下面提供的学习内容可以简单的学习一下，可以进入访问地址查看具体的描述。

访问地址:http://www.ruanyifeng.com/blog/2015/03/react.html

进入访问地址之后，可以将一些Demo下载下来，自己照着说明编写代码并运行，查看效果，有一个直观的认识，拒绝眼高手低，光看不练。