window环境下搭建react native及相关插件

可以先浏览一下中文翻译的开发文档具体了解一下关于React Native，想要查看官方文档可以点http://facebook.github.io/react-native/docs/getting-started.html。

在官方文档中，只给出在Window上安装React Native的教程，没有给Mac下的教程,我在网上找了半天，找了部分内容，又根据自己的理解整理了一下

1、安装Java

这里需要注意对环境变量的设置，可以根据java -version来检测一下

2、安装SDK

这里需要注意设置环境变量ANDROID_HOME：Android SDK Manager的位置 例如：（PATH => E:\Android\sdk）设置环境变量PATH：例如：（PATH => %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools）

3、安装node

这货是基于js的，node.js轻量级的Web服务器，想要是React Native跑起来需要安装node， 如果没有安装node.js，先去官网安装node.js,最好是4.1以上版本，来吧，猛戳这里，下载node.js，找好对应的版本，然后去安装就可以了。建议下载稳定版本



大家可以通过node -v的命令来测试NodeJS是否安装成功

4、安装react-native命令行工具React-native-cli

安装React-native-cli需要用到git，如果没有配置git，需要先下载对应的客户端，然后将git加入path环境变量即可，git的下载可以从群共享里面。



git配置完成后可以clone React-native-cli了，建议大家到将React-native-cli克隆到某个盘，不要在c盘直接clone。

git clonehttps://github.com/facebook/react-native.git

cd react-native/react-native-cli

npm install -g

克隆完成如下：



然后我们安装react-native-cli。



其实到这里我们可以去网上找一个开源的项目，来先做一下运行测试。如果需要看如何创建项目的请跳过。

$ react-native init AwesomeProject

注意：AwesomeProject是项目的名称

如果么有的我提供一个之前开源的美团https://github.com/lookingstars/RNMeituan。

然后用git将它克隆到本地，最好是非系统盘。

注： AwesomProject下的anroid下的local.properties文件是没有的，我们可以直接copy以前的Android项目。



接下来我们打开dos窗口，执行 npm start,会显示如图的提示，然后再输入react-native start命令。如果显示如图那样，证明你服务已经启动了，在这里我们可以看到服务的端口是8081.



然后打开浏览器：http://localhost:8081/index.android.bundle?platform=android

如果打印如下信息，说明成功了。



最后我们编译运行项目。记得要先打开Genymotin模拟器或者连上真机。





执行react-native run-android命令

这里给我提上了一个错误，说必须是在项目级别，也就是我们这里项目的最外层。



这是在再用 gradle构建项目依赖的包，到这里是不是感觉很熟悉了。



报了一个错，说的是有个jar的问题。



哦，又给我搞了个错误，gradle版本的问题，哎，不是自己建的项目，果然各种坑，好那我改下gradle的版本吧。

创建项目

react-native init reactNative

由于网络原因，可能需要等待一些时间





仔细预览我们会发现在安装cli的时候，系统给我们一些提示（告诉我们可以怎么运行项目）：

To run your app on iOS:

cd D:\html5\react_native\react-native\react-native-cli\reactNative

react-native run-ios

- or -

Open D:\html5\react_native\react-native\react-native-cli\reactNative\ios\reactNative.xcodeproj in Xcode

Hit the Run button

To run your app on Android:

Have an Android emulator running (quickest way to get started), or a device connected

cd D:\html5\react_native\react-native\react-native-cli\reactNative

react-native run-android



我发现我在运行android.bat

运行package

运行React Native需要先启动 server，按照网上的一些教程需要运行node_modules\react-native\packager\packager.js，但是我们发现，这个文件夹下面好像是没有这个文件，但是我们发现了一个packager.sh，打开后发现是一个node命令

THIS_DIR=$(dirname "$0")

node "$THIS_DIR/../local-cli/cli.js" start "$@"

看到这里我们可以试着运行/local-cli/cli.js看看能不能起来

node cli.js start