详细讲解如何在windows下搭建react-native的开发环境(包括在设备上安装和运行react-native app )!

第一步(安装基础软件)

1.安装Python2.7,可到官网下载(注意目前不支持Python 3版本)==>>Here 

2.安装Node.js 同样到官网下进行下载,还有中文官网,非常nice,(注意下载最新v6.10.2即可)==>>Here

     安装node都是下一步下一步,安装完后建议设置npm镜像以加速后面的过程(除非你翻墙,哈哈)

 打开cmd,输入node -v 看看有没有显示版本,能显示版本就证明安装成功了,图如下

 

 然后继续输入

                         npm config set registry https://registry.npm.taobao.org --global

                         npm config set disturl https://npm.taobao.org/dist --global

 上面两条语句主要是切换成淘宝团队的镜像(感谢淘宝团队),大大增加了在国内npm安装模块的速度

 好了,第一步就完成啦~

第二步(安装React-Native Cli和Android Stdio)

 1.来来来,让我们安装react-native cli,方法很简单,打开cmd,输入npm install -g react-native,这样就安装好了,react-native命令也可以使用啦!惊讶

 2.安装Android Stdio略为复杂,因为AS需要JDK1.8或者更高的版本,因此在AS之前先把JDK环境给布局好

 下载JDK==>>Here

   

 下载对应的系统位数版本就可以了生气

安装JDK,第一次是安装JDK,第二次是安装jre.建议两个都安装在同一个java文件夹中的不同文件夹中。留意一下JDK安装的目录就行了.

配置JDK环境,

(1)计算机→属性→高级系统设置→高级→环境变量

(2)系统变量→新建 JAVA_HOME 变量 。变量值填写jdk的安装目录

(3)系统变量→寻找 Path 变量→编辑,在变量值输入%JAVA_HOME%\bin;%JAVA_HOME%\jre\bin;(注意原来Path的变量值末尾有没有;号,如果没有,先输入;号再输入上面的代码)

(4)系统变量→新建 CLASSPATH 变量。变量值填写.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\tools.jar(注意最前面有一点)

好了,JDK配置完成之后,就来下载安装Android Stdio吧==>>戳我下载

我下载的是2.1版本,我第一次下了最新的2.3版本装完后加载不了,所以卸载重新装了偏老一点的版本,不知道是不是我电脑的问题,你可以尝试下载新版本(只要是2.0以上的版本react-native都支持的)

(注意,在安装时不要改动安装的内容,全部都勾选安装,尤其是Android SDK和Android Device Emulator。)

(安装过程的图片我暂时就不截了,你可以按我说的一步一步来,毕竟我喜欢用语言来表达(唉,其实就是想偷懒...)

在安装android stdio时,全部内容都勾选,下一步下一步,然后,等待安装.

初步安装完成后,会弹出一个安装项,选择Custom安装项,然后继续下一步即可.

安装完成后,有3步要干的.

1.在Android Studio的欢迎界面中选择Configure,再选SDK Manager。注意了,一定要配置好SDK,在SDK Platforms窗口中,选择Show Package Details(要注意啊,很重要,之前我掉进这里了),然后在Android 6.0 (Marshmallow)中勾选Google APIs、Intel x86 Atom System Image、Intel x86 Atom_64 System Image以及Google APIs Intel x86 Atom_64 System Image(加油,细心点)

2.在SDK Tools窗口中,选择Show Package Details,然后在Android SDK Build Tools中勾选Android SDK Build-Tools 23.0.1。(必须是这个版本)

3.新建ANDROID_HOME环境变量, 确保ANDROID_HOME环境变量正确地指向了你安装的Android SDK的路径.(方法和JDK那里很像啪)

 还有在PATH变量前面添加%ANDROID_HOME%\platforms;%ANDROID_HOME%\platform-tools;%ANDROID_HOME%\tools;

 
 

我之前在增加完变量后,react-native命令不起作用了,后来重新安装react-native解决了此问题.

打开安装好的android stdio,然后start一个项目,下一步下一步,然后找到这个按钮,这个是启动模拟器的键,如果没有安装模拟器的话,可以选一个手机型号来下载,找到对应你的电脑的系统位数,来安装就行了,装完就开机等待,年轻人,要有耐心啊...偷笑

   

开启完成后,在cmd里面敲adb devices,可以看到目前连上的设备,图中可以看到emulator-5554,没错,这就是传说中的模拟器......

好啦,就先开机放在着晾着先,等我们开启RN的时候再玩你大笑,那么,第二大部也完成啦!

第三步(造出你的第一个RN项目)

 创一个你想起什么名都行的文件夹,然后在cmd下cd进去,在此文件夹下,输入react-native init XXX(也是你随便你起的名字,但是第一次的话,建议写AwesomeProject,别问我为什么,因为官当文档是这样写的哈哈哈),因为文件比较大,可能会有点慢,请耐心等待哈

成功后,cd进入帅气的文件名------AwesomeProject,然后就敲下最666的命令----react-native run-android

接着,继续等,因为它要装gradle...(最好还是挂下VPN吧,不然真的很慢)

编译时,会弹出2个窗口,一个是开启服务器的

一个是编译成功后的

如果你的和我一样,那么,恭喜你!微笑

如果你的出现了红屏,请先按ctrl+m,然后选Reload,看看能不能成功,如果还是红屏,请你再按一次ctrl+m,然后选最后一项,也就是Dev Settings,然后点Debug server host&port for device,敲下你的ip地址+:8081,(如何看到本机的ip地址?==》》cmd -> 敲ipconfig -> IPV4显示的就是你的电脑ip地址),如果你的ip地址是192.1.168.123,那就敲下192.1.168.123:8081,然后再Reload一次!祝你好运!

第四步(让你的手机上运行React Native)

  说实话,我这里遇到了不少坑,不过都一一填好了,每次填坑都是收获吧,下面我来说说具体的填坑过程。

  1.先把模拟器关闭(因为会有影响),然后用你的手机(记得是android系统的哦)接上电脑,打开手机的USB调试,然后电脑就在安装你的手机驱动了,我的手机很蛋疼,不会自动说,我只好搞了个应用宝(豌豆荚之类的都可以)来装驱动,装好驱动后,我那蛋疼的手机一直在向我电脑发射弹窗指令,很影响调试哭打开cmd继续输入adb devices,你会看到:

手机已经连接上啦生气

接着你可以进行AwesomeProject文件夹下进行react-native run-android试试,如果你手机比较厉害的话,一次就能成功安装了,只不过是红屏偷笑我手机比较傲娇,在编译时,直接给我BUILD FAILED了,原因我也找到了,听说很多国产机都这样,我的是魅族的,所以,来一起填坑吧!

1.将 android/build.gradle 里的 gradle:1.3.1 改为 gradle:1.2.3

2.将 android/gradle/wrapper/gradle-wrapper.properties里的 distributionUrl 版本改为gradle-2.2-all.zip

保存,重新react-native run-android,等待,手机保持亮屏状态,编程成功后,你手机会看到

不用担心,改改就好,摇下手机,选择设置项,跟前面说的设置好网络地址Reload就好了!(有个很重要的前提是手机要连wifi,一定要和电脑处在同一个局域网上)

我还遇到个坑,编译完一打开app,就是白屏,遇到这情况的童鞋不要慌,请你悄悄地去手机应用管理上,把刚才安装的AwesomeProject的桌面悬浮窗的权限改成允许就可以啦~~

还有一个坑,如果你的手机出现了Could not get BatchedBridge, make sure your bundle is packaged correctly,不要怕,先Reload一下,再去网络地址应该就可以了。

对了,还要说下,如果童鞋不喜欢设备调试,喜欢模拟器调试的话,只要把将 android/build.gradle 里的 gradle:1.2.3 改为 gradle:1.3.1,然后打开模拟器,再run一次就可以了。安静

猜你喜欢

转载自blog.csdn.net/beautiful77moon/article/details/82490999