文档章节

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

Common1140
 Common1140
发布于 2015/12/24 15:02
字数 652
阅读 10977
收藏 302

最近看到React Native好像好厉害的样子,好奇心驱使之下体验了一下并将在Window下搭建React Natvie Android环境的步骤记录下来,并有需要的朋友参考。(我都是参考官方文档的)

react-native的GitHub地址:https://github.com/facebook/react-native

react-native的文档地址:http://facebook.github.io/react-native/docs/getting-started.html


1.准备工作:

打开文档点击'Android Setup',可以看到需要

(a)安装Git from Windows(傻瓜式安装)

(b)Android SDK(配置ANDROID_HOME环境)

(c)使用Gradle构建的(如果你已经在使用Android Studio的这些的都可以忽略了)

注:(这些工作要准备好不然最后出错就好坑了)

2.开始


上面两张图都提示我们需要安装Node.js,打开链接下载Node.js进行安装(傻瓜式安装)。在这里下载最新的。

打开cmd运行执行以下命令

$ npm install -g react-native-cli

$ react-native init AwesomeProject

上面这个命令下载AwsomeProject,如果下载不了可以在我的GitHub的AwesomeProject下载。

命令行在线下载的Awesome默认放到用户文件夹下。

注: AwesomProject下的anroid下的local.properties文件是没有的,这里我从其他项目直接copy过来。

接下来重新打开一个cmd并切换到AwesomProject目录

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

我们在浏览器证明服务是否启动:

在浏览器输入地址:http://localhost:8081/index.android.bundle?platform=android

如果显示下图的那样,那就证明服务已经启动了。如果没有启动的话,接下来那就不用做啦~~~直接break

最后我们编译运行AwesomeProject。有点激动了吧。。。。记得要先打开Genymotin模拟器或者连上真机。


执行react-native run-android命令

如果显示下图,那就说明AwesomeProject项目编译成功了。

最后就是这样子的啦~~哈哈~~~(改过了index.android.js的效果)



真机需要网络需要在同一个局域网(开个WIFI热点就可以了)

运行在真机上出现以下这种情况。。。怎么办

(这手机系统是5.0.1的)

在官方文档可以看到

执行adb reverse tcp:8081 tcp:8081命令

再点击RELOADJS~~~

以上有误,请大家谅解和纠正。

-------------------------------------华丽的分割线---------------------------------

同文CSDN地址:http://blog.csdn.net/common1140/article/details/50394920

同文博客园地址:http://www.cnblogs.com/common1140/p/5072711.html

我的GitHub地址:https://github.com/zhonghanwen

© 著作权归作者所有

共有 人打赏支持
Common1140
粉丝 15
博文 13
码字总数 13069
作品 0
广州
程序员
私信 提问
加载中

评论(45)

Common1140
Common1140

引用来自“lucky_mo”的评论

楼主这是啥情况
C:\Users\Administrator\AwesomeProject>react-native run-android
Starting JS server...
Starting the packager in a new window is not supported on Windows yet.
Please start it manually using 'react-native start'.
We believe the best Windows support will come from a community of people
using React Native on Windows on a daily basis.
Would you be up for sending a pull request?
Building and installing the app on the device (cd android && gradlew.bat install
Debug...
Downloading https://services.gradle.org/distributions/gradle-2.4-all.zip
................................................................................
................................................................................
................................................................................
................................................................................
................................................................................
..................................................
你的命令输错了。是react-native start或者你可以进入cd android进入到android目录再输入gradlew install Debug命令。 --------------------------------- 昨晚断网了,不能及时回复!!!
l
lucky_mo
楼主这是啥情况
C:\Users\Administrator\AwesomeProject>react-native run-android
Starting JS server...
Starting the packager in a new window is not supported on Windows yet.
Please start it manually using 'react-native start'.
We believe the best Windows support will come from a community of people
using React Native on Windows on a daily basis.
Would you be up for sending a pull request?
Building and installing the app on the device (cd android && gradlew.bat install
Debug...
Downloading https://services.gradle.org/distributions/gradle-2.4-all.zip
................................................................................
................................................................................
................................................................................
................................................................................
................................................................................
..................................................
Common1140
Common1140

引用来自“akeng”的评论

卡在可红屏那,执行adb reverse tcp:8081 tcp:8081也没用
提示什么错误?
akeng
akeng
卡在可红屏那,执行adb reverse tcp:8081 tcp:8081也没用
snowdream
snowdream
就是那个红色屏幕的情况
snowdream
snowdream
失败了,看起来是js文件下载不下来,什么情况。
snowdream
snowdream
React packager ready.

[18:45:07] <START> request:/index.android.bundle?platform=android&dev=true
[18:45:07] <START> find dependencies
ERROR Watcher took too long to load
Try running `watchman version` from your terminal
https://facebook.github.io/watchman/docs/troubleshooting.html
Error: Watcher took too long to load
Try running `watchman version` from your terminal
https://facebook.github.io/watchman/docs/troubleshooting.html
at [object Object]._onTimeout (index.js:102:16)
at Timer.listOnTimeout (timers.js:92:15)

See http://facebook.github.io/react-native/docs/troubleshooting.html
for common problems and solutions.
snowdream
snowdream
$ react-native start
┌────────────────────────────────────────────────────────────────────────────┐
│ Running packager on port 8081. │
│ │
│ Keep this packager running while developing on any JS projects. Feel │
│ free to close this tab and run your own packager instance if you │
│ prefer. │
│ │
│ https://github.com/facebook/react-native │
│ │
└────────────────────────────────────────────────────────────────────────────┘
Looking for JS files in
D:\workspace\snowdream\git\AwesomeProject

[18:45:04] <START> Building Dependency Graph
[18:45:04] <START> Crawling File System
[18:45:04] <START> Loadi
Common1140
Common1140

引用来自“gybin02”的评论

$ react-native init AwesomeProject
这步 执行失败,从作者的GItHub那边下载 一份, npm start 也是 失败。
提示什么错误,你看一下哪步出错
gybin02
gybin02
$ react-native init AwesomeProject
这步 执行失败,从作者的GItHub那边下载 一份, npm start 也是 失败。
linux平台安装React Native遇到的坑

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011068702/article/details/82631458 3年前我在windows平台安装过React Native,我一直都记忆犹新,那个时候f...

chenyu_insist
09/11
0
0
React Native macOS Android 搭建开发环境

这个讲的是React Native完整的原生开发环境。 这个环境的搭配,会根据你使用的操作系统、针对的目标平台不同,具体的搭配步骤就会有所不同;如果想同时开发iOS和Android也是没有问题的,你需...

帝子兮
12/03
0
0
一步一步在Windows下搭建React Native Android开发环境

执行上句命令后打开下面这个连接 http://localhost:8081/index.android.bundle?platform=android 页面如图上: 这个页面的说明android项目没有编译成功 需要删除项目(MyProject)下的这个路径...

陈映亮
2017/10/19
0
0
React Native基础——环境配置、学习资源分享

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m366917/article/details/53957903 React Native基础——环境配置、学习资源分享 已经有两个月没有写过博客,...

Aduroidpc
2016/12/31
0
0
ReactNative&weex&&DeviceOne对比

  React Native出来有一段时间了,国内的weex和deviceone是近期发布的,我可以说从2011年就开始关注快速开发的跨平台平台技术了,接触过phoneGap、数字天堂、appcan等早期的移动中间件技术...

jonh_felix
2016/07/25
614
0

没有更多内容

加载失败,请刷新页面

加载更多

jquery通过id显示隐藏

var $div3 = $('#div3'); 显示 $div3.show(); 隐藏 $div3.hide();

yan_liu
今天
3
0
《乱世佳人》读书笔记及相关感悟3900字

《乱世佳人》读书笔记及相关感悟3900字: 之前一直听「荔枝」,后来不知怎的转向了「喜马拉雅」,一听就是三年。上班的时候听房产,买房了以后听装修,兴之所至时听旅行,分手后听亲密关系,...

原创小博客
今天
3
0
大数据教程(9.6)map端join实现

上一篇文章讲了mapreduce配合实现join,本节博主将讲述在map端的join实现; 一、需求 实现两个“表”的join操作,其中一个表数据量小,一个表很大,这种场景在实际中非常常见,比如“订单日志...

em_aaron
今天
3
0
cookie与session详解

session与cookie是什么? session与cookie属于一种会话控制技术.常用在身份识别,登录验证,数据传输等.举个例子,就像我们去超市买东西结账的时候,我们要拿出我们的会员卡才会获取优惠.这时...

士兵7
今天
3
0
十万个为什么之为什么大家都说dubbo

Dubbo是什么? 使用背景 dubbo为什么这么流行, 为什么大家都这么喜欢用dubbo; 通过了解分布式开发了解到, 为适应访问量暴增,业务拆分后, 子应用部署在多台服务器上,而多台服务器通过可以通过d...

尾生
今天
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部