本文基于win7 64位系统进行搭建,32位的话下载各安装文件时选择对应的32位安装包即可。RN的搭建还是挺麻烦的,需要准备的东西很多,而且有很多坑,本文就一一来说,希望能让大家少走点弯路。
1:nodejs
react-native需要启动js服务器,所以nodejs环境是必不可少的,nodejs环境搭建相对来说比较简单。
a)根据你是32位系统还是64位系统选择不同的安装文件(不知道的话在“我的电脑”上点右键,然后点属性,在系统类型这一栏即可看到),我这里下载的是64位的msi文件,下载后直接安装。安装成功后,会在开始任务菜单生成一个nodejs命令工具(Node.js command prompt),我们运行这个工具,然后输入node -v,正确的话会输出版本号。
node -v
v6.4.0
b)设置环境变量,在系统变量这一栏,点新建,在变量名里输入NODE_PATH,在变量值里输入C:\Program Files\nodejs\node_global\node_modules,然后点确定即可。如果你不改默认安装路径的话,64位安装文件就照这个写,否则你就按照你实际的NODEJS安装路径修改。
c)修改PATH系统变量,在最后面追加;C:\Program Files\nodejs\;第一个分号根据情况,如果最后面已经有个分号,你就不需要加了,同样此路径需要根据你实际nodejs安装路径进行修改。添加这个环境变量的目的是为了我们打开普通的命令提示行也能运行node命令,就不需要打开专属的nodejs命令工具了。
2:Ruby
下载Ruby并安装,修改系统变量PATH,在最后追加;C:\Ruby23-x64\bin;同理根据你实际安装路径修改
3:Python
下载Python并安装,修改系统变量PATH,在最后追加;C:\Python27;同理根据你实际安装路径修改
4:git
下载git并安装,修改系统变量PATH,在最后追加;C:\Program Files\Git\cmd;同理根据你实际安装路径修改
5:JDK
这个网上有一大堆的安装教程,下载64位JDK可执行文件并安装,然后设置环境变量,在系统变量这一栏点新建,变量名里输入JAVA_HOME,变量值里输入C:Program Files\Java\jdk1.8.0_121(同理根据你实际安装路径修改)。修改PATH变量,在最后面追加;%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;设置成功后打开命令行输入java -version测试下:
java -version
java version "1.8.0_121"
6:Android SDK
a)下载android-sdk压缩文件,随便解压到哪个目录,这里我解压到D:\JDKS目录下,然后设置环境变量,在系统变量这一栏点新建,变量名里输入ANDROID_HOME,变量值里输入D:\JDKSandroid-sdk_r24.4.1-windows\android-sdk-windows(同理根据你实际安装路径修改)。修改PATH变量,在最后面追加;%ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools;设置完毕后,在命令提示行输入adb确认下:
adb
Android Debug Bridge version 1.0.36
...
b)双击打开SDK Manager.exe文件,然后下载必须的开发依赖包。
b-1)在tools这个目录下,勾选Android SDK Tools,Android SDK Platform-tools,Android SDK Build-tools(这里版本我选择的是24,请一定记住这个版本,后续要用到)。
b-2)在Android 6.0(API 23)目录下,记住23这个版本号,后面要用,建议不要选Android 6.0以上系统比如7,因为对新功能支持的设备实在少的可怜,完全没必要。在该目录下勾选SDK Platform,Intel x86 Atom_64 System Image,Intel x86 Atom System Image这3个包。如果你是用真机来测试,后面两个安装包也可以不安装
b-3)在Extras目录下,勾选Android Support Repoistory,Google Repoistory,Android Auto Api Simulators,Google USB Driver这3个包(如果电脑无法识别你手机,google USB驱动可能就很重要,所以我们下载备用)
b-4)基于已知的原因,你很可能会下载失败,你有2个办法来解决。第一上网找下免费翻墙软件,比如蓝灯,第二,可以在菜单栏的tools这一栏里点选项,HTTP Proxy Server里输入mirrors.neusoft.edu.cn,在HTTP Proxy Port里输入80,然后在勾选下面的Force https://... sources to be fetched using http://...这一行。
7:安装react-native
以管理员身份运行命令提示行,然后在命令行输入npm install -g react-native-cli。完成后在命令行运行react-native -v测试下:
react-native -v
react-native-cli: 2.0.1
react-native: n/a - not inside a React Native project directory
8:Android Studio,可选
如果你有安卓或者JAVA开发经验,你就装一个,没有的话你装了也不会用,所以看情况而定。
至此,你的环境算搭建完毕,你可以先坐下来喝杯咖啡提提神,准备后续的工作。
这里是分界线
由于我们采用真机测试,所以需要开启USB调试模式:
1:打开你的手机,点击系统设置,打开全部设置,看有没有开发者选项这一栏,如果有,就点击进去,将在USB 调试勾选上。如果没有开发者选项这一栏,那就点击关于手机,在版本号上连续单击个几次,就会打开开发者选项,然后跟前面一样设置。这里由于机型,系统不一样,打开USB模式可能有稍微不同,请自行百度就好。
2:开启USB之后,用数据线将你的手机连上电脑,然后在命令行里输入:adb devices
adb device
List of devices attached
JVNNJVTKCILRZPWW device
如果出现类似类似于上述的文字,那么恭喜你,你可以很NICE的开始编写你的RN代码了。
如果没有,很不幸,比如如下,可能要需要费点功夫那解决这个问题了。
adb devices
List of devices attached
这里啥也没有,气死你哈哈哈
a)如果数据线连接后,电脑没有任何提示,那么很大可能你的数据线是坏的(虽然可以充电),你需要换一跟数据线(比如原装的),根据我的经验,短的数据线比长的数据线不容易坏
b)电脑有提醒找到设备,但是无法识别,打开设备管理器,找到显示黄色感叹号的设备,请按照如下步骤解决
b-1)卸掉重新安装驱动程序,还不行就执行b-2
b-2)在黄色感叹号上点右键->选择升级驱动程序->浏览计算机以查找驱动程序软件->从计算机的设备驱动列表中选择->选择所有设备->下一步->从磁盘安装->点浏览,找到在第6步中你安装的Android SDK目录,依次选择extras->google->usb_driver->android_winusb.inf,然后点确定,忽略不兼容的警告等提醒,一路安装即可
b-3)正常情况下你的USB设备应该就能识别了,如果还有些煞笔设备,比如华为手机,可能还是没法识别,你需要打开工程模式,在拨号键盘上输入##2846579##输入完毕后将会自动打开工程模式,在后台设置里找到USB端口模式,将USB端口模式改成google 模式。
c)在你的手机通知栏信息里,将USB连接选项改成相机模式。
以上几个方法,应该能解决90%以上找不到设备的问题。如果你还没有解决或者你用别的办法解决了,请告诉我下,我补上去,谢谢!
设置npm淘宝镜像,众所周知的原因,呵呵,在命令行里运行
npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist
以上就是环境搭建篇,希望按照上述步骤,你能顺利搭建好你的开发环境,下面就小试牛刀,开始开发你激动人心的第一个RN应用吧。