React Native初试:Windows下Andriod环境搭建
最近想写个App,又觉得Native App 太无趣了Web App又没那么成熟然后发现了Facebook在9月发布的React Native比较新奇,所以决定捣鼓看看;
React Native为Facebook开源的使用Javascript与React开发Android、IOS原生跨平台App,React也是Factbook开源的JS框架使用了虚拟DOM的概念,Factbook自己的应用如Groups也是基于React Native在国内也有淘宝iPad版本是哟个了React Native;
React Native最早支持的是Mac,for Android windows的支持9月份才刚发布还存在不少坑;
基本环境安装
开发Android App当然首先要安装:JDK、Android SDK配置好JDk、SDK环境变量;
安装C++编译环境(可以选择Visual Studio 或mingw等),编译nodejs的C++模块会使用;
安装git、安装Node.js环境;
React-Native 安装
如果没有VPN最好设置npm镜像不然及其考验你的耐性
npm config set registry https://registry.npm.taobao.org
安装 React-Native
npm install -g react-native-cli
创建项目
进入你希望项目存放的工作目录,运行
react-native init HelloWorld
请耐性等待,第一次下载依赖会比较久;
运行packager
npm start或react-native start
查看 http://localhost:8081/index.android.bundle?platform=android 是否能打开;
启动模拟器,运行adb devices查看是否设备已连接上;
保持packager开启,另外打开一个命令行窗口,然后在工程目录下运行
运行React Native
react-native run-android
异常:
A problem occurred configuring project ':app'.
> Could not resolve all dependencies for configuration ':app:_debugCompile'.
> Could not find com.android.support:appcompat-v7:23.1.1.
解决方案:安装Android Support Repository与Android Support Library
如没有VPN要耐性等待,gradle下载一些依赖。
运行成功
生成APK
进入项目目录进入Android目录,在命令行运行:
gradlew assembleRelease
在React-native 0.14.2版本的时候会存在两个坑,应该算是Bug;
在https://github.com/danhanfry/react-native-windows-apk发现了解决方案;
坑 1:
> A problem occurred starting process 'command 'react-native''
解决方案:进入项目目录》android目录》app目录打开react.gradle文件
在文件头加入:import org.apache.tools.ant.taskdefs.condition.Os
找到
commandLine "react-native", "bundle", "--platform", "android", "--dev", "true", "--entry-file",
entryFile, "--bundle-output", jsBundleFileDebug, "--assets-dest", resourcesDirDebug
修改为:
if (Os.isFamily(Os.FAMILY_WINDOWS)) {
commandLine "cmd", "/c", "react-native", "bundle", "--platform", "android", "--dev", "true", "--entry-file",
entryFile, "--bundle-output", jsBundleFileDebug, "--assets-dest", resourcesDirDebug
} else {
commandLine "react-native", "bundle", "--platform", "android", "--dev", "true", "--entry-file",
entryFile, "--bundle-output", jsBundleFileDebug, "--assets-dest", resourcesDirDebug
}
找到:
commandLine "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file",
entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease
修改为:
if (Os.isFamily(Os.FAMILY_WINDOWS)) {
commandLine "cmd","/c", "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file",
entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease
} else {
commandLine "react-native", "bundle", "--platform", "android", "--dev", "false", "--entry-file",
entryFile, "--bundle-output", jsBundleFileRelease, "--assets-dest", resourcesDirRelease
}
坑2:
Execution failed for task ':app:bundleReleaseJsAndAssets'.
> Process 'command 'cmd'' finished with non-zero exit value 1
解决方案:
在HelloWorld\node_modules\react-native\packager\react-packager\src\SocketInterface目录找到index.js文件在40行左右把:
const sockPath = path.join(
tmpdir,
'react-packager-' + hash.digest('hex')
);
修改为:
let sockPath = path.join(
tmpdir,
'react-packager-' + hash.digest('hex')
);
if (process.platform==='win32'){
sockPath = sockPath.replace(/^\//, '')
sockPath = sockPath.replace(/\//g, '-')
sockPath = '\\\\.\\pipe\\' + sockPath
}
生成成功后就可以在:android\app\build\outputs\apk目录下看到生成的apk;
文章首发地址:Solinx
http://www.solinx.co/archives/507
React Native初试:Windows下Andriod环境搭建的更多相关文章
- React Native在window下的环境搭建(二):创建新项目
React Native创建一个新项目: react-native init TestAndroidApp 提示:你可以使用--version参数(注意是两个杠)创建指定版本的项目.例如react-n ...
- React Native在window下的环境搭建(一)
React Native官方开发文档 以下是本人抄录的: 初次接触React Native感觉和React很像,却是有点类似,但不完全是,React Native有自己的组件对象,不过它也自定义的组件 ...
- React Native - 1 Windows下的环境配置(Windows+Android)
参考:https://facebook.github.io/react-native/docs/getting-started.html(要FQ) 网站上建议使用Chocolatey去配环境, ...
- Windows下的环境搭建Erlang
Windows下的环境搭建 Erlang 一.安装编译器 在http://www.erlang.org/download.html下载R16B01 Windows Binary File并安装. 二. ...
- Redis在windows下的环境搭建
Redis在windows下的环境搭建 下载windows版本redis,,官方下载地址:http://redis.io/download, 不过官方没有Windows版本,官网只提供linux版本的 ...
- 2017.7.18 windows下ELK环境搭建
参考来自:Windows环境下ELK平台的搭建 另一篇博文:2017.7.18 linux下ELK环境搭建 0 版本说明 因为ELK从5.0开始只支持jdk 1.8,但是项目中使用的是JDK 1.7, ...
- windows下React-native 环境搭建
公司决定试水react-native,mac审批还没下来,没办法,先用windows硬着头皮上吧. 参考文章: React Native 中文网官方文档 史上最全Windows版本搭建安装React ...
- React Native入门教程 1 -- 开发环境搭建
有人问我为啥很久不更新博客..我只能说在学校宿舍真的没有学习的环境..基本上在宿舍里面很颓废..不过要毕业找工作了,我要渐渐把这个心态调整过来,就从react-native第一篇博客开始.话说RN也出 ...
- windows下 react-native环境搭建
跟着慕课网做案例,搭建rn环境遇到很大问题. 下面说一下: 首先看一下文档:http://reactnative.cn/docs/0.44/getting-started.html#content 注 ...
随机推荐
- 使用loadrunner进行压力测试之----post请求
1. 发送post请求时使用web_submit_data 如: web_submit_data("create",//事务名 "Action=http://bizhi. ...
- ERROR 1452 (23000): Cannot add or update a child row: a foreign key constraint......
今天用Hibernate建立外键的时候发现没有建立 但是创建了这个字段 情景: user表有一字段role,role是role表id字段的外键 原因: user表中已经有记录了,而且有的记录role这 ...
- Spring IoC源码解决——工具篇Eclipse
题外话 对于Spring框架,平时都是点到为止,停留在会用的程度.一直以来都想深入学习下,刚好最近看到<Spring源码深度解析>,所以想随着书本深入学习一下. 如果用Maven 如果使用 ...
- 使用 github + jekyll 搭建个人博客
github + jekyll 本地写markdown,然后push到github,就成了博客 其实我一早就知道这两者可以搭建个人博客,因为本人有个很好的习惯——每天都会去看看一些热门文章,了解行业最 ...
- 用Microsoft.Solver.Foundation进行线性规划,为WPF应用添加智能
在管理信息系统的开发过程中,往往会涉及到一些线性规划数学模型,例如资源配置优化.微软的Microsoft.Solver.Foundation是一个数学库,可以很好的对线性规划问题进行求解.关于它的细节 ...
- 分享11个纯css完成的图片浏览器
图片画廊用于在网站上显示系列图片,它已成为网站重要的组成部分.实现图片画廊有很多种方法,今天要与大家分享的是11个使用纯 CSS 实现的图片画廊,它们代码少,效果炫,加载速度快,希望能对大家有所帮助. ...
- [deviceone开发]-do_Viewshower的动画效果示例
一.简介 do_Viewshower组件也支持View之间的过场动画,支持大概12种,这个示例随机的切换12种动画中的一种,而且每次切换的动画时间不一样.直观的展示12种动画的效果.适合初学者. 二. ...
- 实现a标签中的各种点击(onclick)事件的方法
我们常用的在a标签中有点击事件:1. a href="javascript:js_method();"这是我们平台上常用的方法,但是这种方法在传递this等参数的时候很容易出问题, ...
- JavaScript强化教程——jQuery AJAX 实例
什么是 AJAX?AJAX = 异步 JavaScript 和 XML(Asynchronous JavaScript and XML).简短地说,在不重载整个网页的情况下,AJAX 通过后台加载数据 ...
- ABAP 指針常用语法
1 .定义指針 :指針的定義主 要有以下語句 定義任意類型的指針,但是不具備欄位結構(僅僅是一個地址) FIELD-SYMBOLS <carrid> TYPE ANY. 參考數據庫表定義( ...