基于React Native的android开发框架搭建

[Supported operating systems are >= Android 4.1 (API 16) and >= iOS 7.0.]

1. 安装JDK环境，配置好相关环境变量

2. 安装Android SDK,配置好环境变量

可以单独安装Android SDK，也可以通过Eclipse ADT或者Android Studio一并安装。推荐使用Android Studio，以下说明会默认以Android Studio的方式说明。请注意选择x86还是x64版本。

为了加速下载，推荐从AndroidDevTools下载。

然后进入SDKManager(可通过Android Studio菜单Tools-Android-SDK Manager)，确保以下项目已经安装并更新到最新。

推荐使用腾讯Bugly的镜像加速下载。

推荐将SDK的platform-tools子目录加入系统PATH环境变量。例如（设置环境变量ANDROID_HOME：Android SDK Manager的位置 例如：（ANDROID_HOME => D:\soft\adt-bundle-windows-x86_64-20140702\sdk 设置环境变量PATH：例如：（PATH => %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools））



运行这个就代表环境变量设置成功

安装node.js，这个安装后才能用NPM的命令

在http://nodejs.org/ 网站下载最新的node.js (我用的是nodejs4.2.2)

配置环境变量：C:\Program Files\nodejs 将node.exe的目录加入到path环境变量里面去

为了方便切换npm源，需要先安装nrm模块





我用了cnpm的镜像



安装git，在执行命令的时候，需要通过git到github上去下载相关的文件。

下载地址如下：

http://www.git-scm.com/downloads

安装好配置好环境变量（在path里面加上 C:\Users***\AppData\Local\Programs\Git\bin）之后命令 行中就有git命令。

安装react-native命令行工具

官方的安装方法是：

npm install -g react-native-cli



创建项目

进入你的工作目录，运行

react-native init MyProject

并耐心等待数分钟（事实证明需要很长时间）。



由于网络被墙等原因，可能这步没法成功，可以采用以下的方式：

参考：http://www.cnblogs.com/trying/p/4064518.html

镜像使用方法（三种办法任意一种都能解决问题，建议使用第三种，将配置写死，下次用的时候配置还在）:

1）.通过config命令

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

npm info underscore （如果上面配置正确这个命令会有字符串response）

2）.命令行指定

npm –registry https://registry.npm.taobao.org info underscore

3）.编辑 ~/.npmrc 加入下面内容

registry = https://registry.npm.taobao.org

我采用的是方法1，得到如下的结果：



配置完后运行以下的命令，就能创建项目了：



创建完成执行 node node_modules\react-native\packager\packager.js 启动服务

注意：新版本没有packager.js文件，双击packager.sh启动。



在浏览器中打开http://localhost:8081/index.android.bundle?platform=android ，如果可以访问表示服务器端已经可以了，浏览器中访问时，刚才的命令行会显示进度。

谷歌内核的浏览器中打开http://localhost:8081/debugger-ui，下载插件后，根据提示可以调试应用

运行app

进入工程目录运行

react-native run-android

报错如下：



（解决办法：）修改文件 **\myproject\android\app 下的文件build.gradle（将sdk版本修改到合理空间）：

android {

compileSdkVersion 19

buildToolsVersion “19.1.0”

defaultConfig {

applicationId “com.myproject”

minSdkVersion 16

targetSdkVersion 19

versionCode 1

versionName “1.0”

ndk {

abiFilters “armeabi-v7a”, “x86”

}

}

修改完后接着报错，哎…够折腾的



此问题和http://stackoverflow.com/questions/29580487/could-not-resolve-all-dependencies-for-configuration-app-debugcompile 有些相似

（解决方案）修改文件 **\myproject\android\app 下的文件build.gradle

dependencies {

compile fileTree(dir: “libs”, include: [“*.jar”])

compile “com.android.support:appcompat-v7:19.1.0”

compile “com.facebook.react:react-native:0.15.+”

}

修改后还是没有效果，真是头大~~~

后面有找到一个资料http://stackoverflow.com/questions/33023018/react-native-awesome-project-not-building-android-project 我的和此问题比较像，没办法只有had to install Android Support Repository in Extras了，参考官网https://facebook.github.io/react-native/docs/android-setup.html 将截图上所需要下载的全部下载下来。

实在找不到办法了（只有将上面修改的部分全部还原），然后将SDK更新到23.0.1的,以及安装 Android Support Libraries 和 Android Support Repository统统更新到23版以及以上，再次运行相关命令。

已经OK，连接手机再次运行。

最后还是死活都不能在我的魅族手机上成功使用，哎麻烦（不晓得是不是我本地的ANDROID SDK安装的问题）



解决办法：

发现，果然是 Server 访问错误。参考 官方文档 。对于 Android 5.0 及以上的设备，直接运行：

$ adb reverse tcp:8081 tcp:8081

(此方法还是没能解决我的问题，但是我用4.1.2的手机就能显示以下的图）



果然，系统默认禁用掉了 APP 的 显示悬浮窗 的权限。因为那个菜单是实用悬浮窗来显示的，所以一直看不到。开启这个权限，然后就可以正常唤起菜单了。然后菜单中选择Dev Settings->Debug server host for device，填入你开发电脑的 IP 地址。如果手机和电脑不在同一个网段，或者手机不能访问到，就会出现如下页面：

所以设置下



使用模拟器

a.安装Genymotion模拟器（它只针对个人用户免费）

b.也可以使用Google官方模拟器.这个是免费的，但是相比Genymotion模拟器要难用一些。

我这里选的是Genymotion模拟器.配置好模拟器并启动，到临时工程目录

react-native start

然后另起一个终端 react-native run-android 报错如下：



修改了Genymotion的ADB路径后就可以了：



再次运行