文档章节

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

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

最近看到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
粉丝 12
博文 12
码字总数 10845
作品 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 也是 失败。
一步一步在Windows下搭建React Native Android开发环境

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

陈映亮
2017/10/19
0
0
React-Native学习资料分享

React Native 构建 Facebook F8 2016 App / React Native 开发指南 f8-app.liaohuqiu.net/ React-Native入门指南 github.com/vczero/reac… 30天学习React Native教程 github.com/fangwei71......

codeGoogle
05/27
0
0
windows配置react-native 开发环境(开发android版本)

新到的公司用的window系统,要开发react-native,没办法,只好一步步开始配置其开发环境。 安装node环境,https://nodejs.org/zh-cn/ 官网下载即可。 安装react-native-cli, 这里没有强制用...

前端大白
07/10
0
0
React Native SDK for OSS

此文主要介绍 React Native SDK for OSS的方方面面,包括相关基本概念、项目背景、项目方案、环境搭建运行、使用姿势、注意事项等。文末的附件可运行Example Zip压缩包和针对新手的入门实用文...

zuozhao
05/18
0
0
react-native下遇到的坑,在这里都可以解决

React-Native android在windows下的踩坑记 坑很多,跳之前做好准备。没有VPN的同学请浏览完本文后慎行。 你需要先安装最新版本的node.js(我最后使用的是v4.1.2),前往官网下载>> 注:我win...

hqxluoyang
2015/10/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

49.Nginx防盗链 访问控制 解析php相关 代理服务器

12.13 Nginx防盗链 12.14 Nginx访问控制 12.15 Nginx解析php相关配置(502的问题) 12.16 Nginx代理 扩展 502问题汇总 http://ask.apelearn.com/question/9109 location优先级 http://blog....

王鑫linux
今天
1
0
Nginx防盗链、访问控制、解析php相关配置、Nginx代理

一、Nginx防盗链 1. 编辑虚拟主机配置文件 vim /usr/local/nginx/conf/vhost/test.com.conf 2. 在配置文件中添加如下的内容 { expires 7d; valid_referers none blocked server_names *.tes......

芬野de博客
今天
0
0
spring EL 和资源调用

资源调用 import org.springframework.beans.factory.annotation.Value;import org.springframework.context.annotation.PropertySource;import org.springframework.core.io.Resource;......

Canaan_
今天
1
0
memcached命令行、memcached数据导出和导入

一、memcached命令行 yum装telnet yum install telent 进入memcached telnet 127.0.0.1 11211 命令最后的2表示,两位字节,30表示过期时间(秒) 查看key1 get key1 删除:ctrl+删除键 二、m...

Zhouliang6
今天
1
0
Linux定时备份MySQL数据库

做项目有时候要备份数据库,手动备份太麻烦,所以找了一下定时备份数据库的方法 Linux里有一个 crontab 命令被用来提交和管理用户的需要周期性执行的任务,就像Windows里的定时任务一样,用这...

月夜中徘徊
今天
1
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部