ReactNative开发(一)之开发环境搭建

序语：博主站在一个Android开发人员的角度

1、JDK的安装和配置

对于jdk的配置环境的细节在这里我就不过多的去说明，但是特别注意的一点，最好是安装jdk8及以上的版本，避免编译的时候提示你jdk版本过低，然后在这里我还出现了一个情况，java环境变量配置并没有什么问题，但是在执行javac的时候却提示你不是系统的命令， 我的系统是window10，然后查阅了相关资料发现，在环境变量里面，window10突然识别不了javahome环境变量，所以这里我们设置成了绝对路径，然后才可以

2、SDK的相关下载及配置

对于现在的sdk和androidstudio下载后，是没显示是SDKmanager的，然后在AndroidStudio的setting里面下载需要的东西，并且还需要配置环境变量Android_home,否则可能会出现相关的问题；

ANDROID_HOME=> E:\Android\sdk
%ANDROID_HOME%\tools;
%ANDROID_HOME%\platform-tools
============================================
Android SDK Build-tools version 23.0.1
Android 6.0 (API 23)
Android Support Repository
Local Maven repository for Support Libraries

3、node安装和配置

这里想要安装ReactNative必须先安装node
这里提供官方下载地址：https://nodejs.org/en/
然后通过node -v的命令来测试NodeJS是否安装成功，安装成功后添加node的环境变量的配置，这一步不可少；
安装完node后建议设置npm镜像以加速后面的过程（或使用科学上网工具，否则下载会很慢）:

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

4、Git的安装和配置

安装React-native需要用到git，需要先下载对应的客户端，然后将git加入path环境变量即可，这里下载可能会很久，请耐心等待，这里我们看下整个环境变量的配置

下载地址：https://git-for-windows.github.io/
在你想安装的位置下的路径，输入命令
git clone https://github.com/facebook/react-native.git

5、在react-native-cli目录安装react-native

进入eact-native-cli目录输入npm install -g，这里可能会出错

这里出错的原因，可能是因为node的环境变量没有配置，导致执行不了npm命令，实在不行就执行npm install react-native-cli -g来安装

6、创建RN项目

在创建项目的目录后，输入react-native init AwesomeProject，(这里AwesomeProject为工程名)等待一段时间，创建项目如果还报错，看看是否添加了环境变量C:\Users\shiqi\AppData\Roaming\npm，然后清除npm-cache，确认环境变量没有缺少，使用的是科学上网；

成功只有会提示你在哪一个平台运行

7、运行RN

这里我们进入到项目的里面，执行react-native start，等待一段时间

这里我提示没有这个包，那么我们执行npm install 包名

重新运行之后提示开启

这里尝试访问这个地址，如果显示网页，则证明访问服务端没问题；
http://localhost:8081/index.android.bundle?platform=android

8、运行项目

在刚才开启RN的命令行窗口不要关闭，另启一个命令行窗口，进去项目的目录，开启模拟器或者链接手机，输入react-native run-android

这里在下载gradle包，可能要花点时间，然后我这里报错

这里提示模拟器和设备的原因，我链接了一个模拟器后再运行

这里提示SDK build Tools23没有，那么我在再sdkmanager或者AndroidStudio中下载完整的Build Sdk Tools版本后，再运行

这里提示这样的错误，我们需要在手机或者模拟器中卸载同样的名字的项目，然后再运行

终于运行成功，在模拟器中显示如下

这里链接手机却显示报错，原来是因为模拟器跟电脑实在同一个局域网

这里我们拿手机摇两下，看到一个弹窗，找到Dev Settings，点击Debug server host & port for device设置IP和端口，这个动作在模拟器可以用ctrl+M (Menu)来调出Dev setting菜单；

输入电脑的ip和固定端口8081，然后回到主页面Reload，显示欢迎页

这里我们整个环境的配置就完成了，一起来开发React Ｎative项目吧~