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

原创 2015年11月19日 16:10:36

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

React Native集成Redux框架讲解与应用

如果你原本是搞移动原生开发的小伙伴,或许会有种疑问,Redux是个什么玩意,怎么刚刚学React Native(RN),又冒出来一个Redux框架,矣,暂先别疑问,当你学了以后,大多都有想放弃的心情,...
  • jj120522
  • jj120522
  • 2016年08月08日 09:52
  • 4786

基于Redux的ReactNative项目开发总结(一)

写在前面 上周把基于Redux的单页应用开发完 紧接着就开始了ReactNative的开发。真的快得不可思议,只花了一周时间,我们两个人就分工把APP也开发完了,并且同时兼容IOS操作系统和And...
  • u011413061
  • u011413061
  • 2016年06月17日 17:09
  • 15596

【React Native开发】React Native For Android环境配置以及第一个实例(1)

(一)前言                FaceBook早期开源发布了React Native For IOS,终于在2015年9月15日也发布了ReactNative for Android,虽然...
  • jiangqq781931404
  • jiangqq781931404
  • 2016年01月04日 16:56
  • 19021

React Native从零开始(九)ViewPagerAndroid的使用,和简单框架搭建

React Native从零开始(九)ViewPagerAndroid的使用,和简单框架搭建 先上一下效果图,在最后会给出源码 一、ViewPagerAndroid的基本使用 ...
  • SuperBigLw
  • SuperBigLw
  • 2017年01月20日 09:45
  • 630

Android开发主页框架搭建

刚开始学Android时,一直想着搭建一个类似微信的主界面一样的框架,点击底部的按钮后切换到相应的界面,在学习了Android 几个月后,开始要做项目了,然后接到的第一个项目就有这样的要求(好像市面主...
  • h623691640
  • h623691640
  • 2016年01月16日 19:20
  • 527

手把手教你在Windows下搭建React Native Android开发环境

最近看到React Native好像好厉害的样子,好奇心驱使之下体验了一下并将在Window下搭建React Natvie Android环境的步骤记录下来,并有需要的朋友参考。(我都是参考官方文档的...
  • common1140
  • common1140
  • 2015年12月24日 15:54
  • 744

一步一步在Windows下搭建React Native Android开发环境

搭建JAVA开发环境根据操作系统分为x86或x64位的,下载jdk1.8以上的版本,本机安装时的java版本:jdk-8u45-windows-x64.exe配置JAVA的环境变量JAVA_HOME ...
  • itpinpai
  • itpinpai
  • 2016年03月05日 16:15
  • 25705

Mac上搭建React Native Android开发环境并运行

react-native目前是越来越火,很多人都开始接触,环境搭建就显得比较重要,具体方法可以看一下这两篇文章 1、mac上搭建步骤 2、Mac OSX 安装nvm(node.js版本管理器)在执...
  • cuiran
  • cuiran
  • 2016年10月17日 11:56
  • 1356

在Windows下搭建React Native Android开发环境

在Windows下搭建React Native Android开发环境 一、安装JDK 从Java官网下载JDK并安装。请注意选择x86还是x64版本。 将JDK的bin目录加入系统PATH环境...
  • CeKwok
  • CeKwok
  • 2015年10月19日 20:38
  • 400

Android开发 React Native项目创建及环境搭建

首先你需要安装NodeJS,因为React Native(简称RN,后面我就都用RN称呼了)本身就是使用Javascript语言和React语言为基础的,后面你会发现所有文件都是以.js为后缀名的,所...
  • xhf_123
  • xhf_123
  • 2017年10月24日 09:53
  • 205
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:基于React Native的android开发框架搭建
举报原因:
原因补充:

(最多只允许输入30个字)