关闭

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

571人阅读 评论(0) 收藏 举报
分类:

[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))

这里写图片描述
运行这个就代表环境变量设置成功

  1. 安装node.js,这个安装后才能用NPM的命令
    http://nodejs.org/ 网站下载最新的node.js (我用的是nodejs4.2.2)
    配置环境变量:C:\Program Files\nodejs 将node.exe的目录加入到path环境变量里面去

    为了方便切换npm源,需要先安装nrm模块
    这里写图片描述
    这里写图片描述

    我用了cnpm的镜像
    这里写图片描述

    1. 安装git,在执行命令的时候,需要通过git到github上去下载相关的文件。
      下载地址如下:
      http://www.git-scm.com/downloads
      安装好配置好环境变量(在path里面加上 C:\Users***\AppData\Local\Programs\Git\bin)之后命令 行中就有git命令。
  2. 安装react-native命令行工具
    官方的安装方法是:
    npm install -g react-native-cli

    这里写图片描述

  3. 创建项目
    进入你的工作目录,运行
    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,得到如下的结果:
这里写图片描述

配置完后运行以下的命令,就能创建项目了:
这里写图片描述

  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,下载插件后,根据提示可以调试应用

  1. 运行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路径后就可以了:
这里写图片描述
再次运行
这里写图片描述

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:8929次
    • 积分:381
    • 等级:
    • 排名:千里之外
    • 原创:19篇
    • 转载:4篇
    • 译文:2篇
    • 评论:0条