文档章节

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

Common1140
 Common1140
发布于 2015/12/24 15:02
字数 652
阅读 1.1W
收藏 301

最近看到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也没用
雪梦科技
雪梦科技
就是那个红色屏幕的情况
雪梦科技
雪梦科技
失败了,看起来是js文件下载不下来,什么情况。
雪梦科技
雪梦科技
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.
雪梦科技
雪梦科技
$ 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
2018/09/11
0
0
React Native macOS Android 搭建开发环境

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

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

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

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

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

Aduroidpc
2016/12/31
0
0
最新的在原生Android应用中集成ReactNative

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/SilenceOO/article/details/88261077 集成到现有原生应用 把 React Native 组件集成到 Android 应用中有如下几...

PennTsui
2019/03/06
0
0

没有更多内容

加载失败,请刷新页面

加载更多

个人环境之ubuntu的apt-get 总结

前言 apt-get是必须要学会的,如果搞定apt-get,可解决很多问题。接下来鸟才啊总结以往经验。 场景一 指定安装版本 先查看有软件有那些版本可以安装 apt-cache madison gcc-4.8 gcc-4.8 ...

鸟菜啊
39分钟前
42
0
kafka是什么?storm与kafka的区别?

kafka是消息队列,类似于RabitMQ,作为中间组件,主要解决异步,削峰,提高系统性能。 storm与kafka的区别? storm用于流数据的实时处理,在获取流数据之前,需要加入kafka消息队列来提高性能...

七宝1
今天
97
0
第二章 构建业务中台的基础----共享服务体系

1.ESB:企业服务总线。 2.SOA理念最核心的价值:松耦合的服务带来业务的复用,通过服务的编排助力业务的快速响应和创新。 3.服务不需要“业务稳定”,而需要不停的滋养,只有在滋养中才能从最...

zxx901221
今天
41
0
Spring Boot 2.x基础教程:使用 ECharts 绘制各种华丽的数据图表

上一节我们介绍了如何在Spring Boot中使用模板引擎Thymeleaf开发Web应用的基础。接下来,我们介绍一下后端开发经常会遇到的一个场景:可视化图表。 通常,这类需求在客户端应用中不太会用到,...

程序猿DD
昨天
116
0
SpringBoot实战:SpringBoot之自定义配置(一)

SpringBoot会默认加载application.yml和application.properties文件,但是有时候我们会对一些配置进行分类管理,如把数据库等配置进行单独配置,那这时候要怎么办呢,SpringBoot作为现在最流...

枫叶_林
昨天
82
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部