从零开始在win10系统搭建react-native开发环境

2017-01-08 04:56:00

全栈

1. win10 react-native环境搭建
1.3. 二、Android环境的下载与配置
1.4. 三、安装node.js
1.5. 四、创建第一个在手机上运行的react-native应用
1.6. 总结与收获

win10 react-native环境搭建

首先不得不先吐槽一下自己，一个坑总是踩很多次，且乐此不疲。
咋办? 写博客记录记录呗。

零、记录的点

Java环境的下载与配置
Android环境的下载与配置
Node环境的下载与配置
创建第一个react-native应用

最终能够达到的目的：在手机上能够运行第一个React-Native应用~

以备后用，已将安装包上传到了网盘密码：bqbc

一、Java环境的下载与配置

记录下Java里面的三个术语理解

JDK是什么？

答曰：JDK乃【Java开发工具包】 (Java Development Kit ) 的缩写,
是一种用于构建在 Java 平台上发布的应用程序、applet 和组件的开发环境

JRE是什么？

答曰：JRE乃【Java运行环境】(Java Runtime Environment)的缩写,
其包含JVM标准实现及Java核心类库

JVM是什么？

答曰：JVM是【Java虚拟机】(Java Virtual Machine)的缩写

下载安装配置JDK

到官网或者android-studio下载JDK
安装JDK，我安装到的D:\Software\JavaJdk
必须得配置环境变量滴
①java_home:D:\Software\JavaJdk
②classpath(.;开头):.;%java_home%\lib\dt.jar;%java_home%\lib\tools.jar
③追加path变量的值:;%java_home%\bin

二、Android环境的下载与配置

下载Android SDK

到android-studio下载SDK。
运行installer_r24.4.1-windows.exe安装、或zip解压出来的SDK Manager.exe

然后我安装了以下这些包(我的react-native版本是0.40.0)

SDKManager使用说明：

被镜像坑了，所以不推荐镜像，直接修改hosts文件就成—>去找最新的hosts
镜像地址—>去找最新的镜像地址

镜像使用说明

使用镜像安装不了23.0.1的同学趁早换hosts的方式或者挂vpn。

科学上网还是得备个vpn呐~~~

SDK包下好了，接下来就配置系统环境变量吧

①ANDROID_HOME:D:\Software\JavaAndroidSdk
②追加path变量的值:%ANDROID_HOME%\platforms\;%ANDROID_HOME%\platform-tools\;%ANDROID_HOME%\tools\;%ANDROID_HOME%;
我的Path图

测试Java环境，Android环境

失败自行回退检查~~

三、安装node.js

node官网历史版本修改下载链接的值就能下载历史版本了
如：我使用的是版本是V6.2.0
然后就是node的一些设置了
npm config set prefix "D:\Program Files\nodejs\node_global" //设置全局包目录,全局安装的工具等会放在此目录下，故windows下需要设置环境变量
npm config set cache "D:\Program Files\nodejs\node_cache" //设置缓存目录
npm config set registry https://registry.npm.taobao.org" //设置淘宝镜像

之前有安装过node，卸载旧版重新安装到之前的目录就==升级了
npm升级命令npm update

四、创建第一个在手机上运行的react-native应用

启动CMD定位到开发目录：例F:\ReactDemo
全局安装npm install -g react-native-cli
初始化一个项目：react-native init yimoapp
cd yimoapp
运行packager：react-native start

如果你碰到了ERROR Watcher took too long to load的报错，请尝试将这个文件中的MAX_WAIT_TIME值改得更大一些 (文件在node_modules/react-native/目录下)。
成功运行这时候可以用浏览器访问http//localhost:8081/index.android.bundle?platform=android查看服务端是否已成功启动
真机运行,使用usb连接手机，开启USB调试权限
查看连接的设备：adb devices
react-native run-android构建工程并自动安装到手机

不要慌，先做点准备工作。手动下载gradle-2.4-all.zip到本地
修改 F:\ReactDemo\yimoapp\android\gradle\wrapper\gradle-wrapper.properties文件的distributionUrl配置为[本地的gradle-2.4-all.zip路径]以使其可离线下载
包安装得差不多的时候会提示你安装应用

可能会有一个这样的错误，奇怪的是第一次安装有,这一次安装就没有遇到了。

将android/build.gradle文件中的 classpath ‘com.android.tools.build:gradle:1.3.1’ 改为 classpath ‘com.android.tools.build:gradle:1.2.3’ 。猜测是插件包不兼容导致。
解决白屏问题
找到并开启应用的悬浮窗权限,以mui8.1为例，设置->授权管理->应用权限管理->yimoapp->勾选显示浮窗权限
然后再次打开yimoapp。我去。这次来个大红色的错误了

咋办。摇一摇说不定有奇迹

在回退刷新前。我去改了改index.android.js，好了回到页面摇一摇然后刷新