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

最近看到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的这些的都可以忽略了)

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

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

2.开始

打开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~~~

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

时间: 2024-10-05 22:22:57

手把手教你在Windows下搭建React Native Android开发环境的相关文章

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

http://my.oschina.net/jackzlz/blog/508210 安装JDK 从Java官网下载JDK并安装.请注意选择x86还是x64版本. 推荐将JDK的bin目录加入系统PATH环境变量. 安装Android SDK 可以单独安装Android SDK,也可以通过Eclipse ADT或者Android Studio一并安装.推荐使用Android Studio,以下说明会默认以Android Studio的方式说明.请注意选择x86还是x64版本. 为了加速下载,推荐从

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

widows版本: win7 64位 专业版 1. 安装jdk.(我用的jdk7) 注意选择x86还是x64版本, 添加到系统PATH环境变量 2. 准备好android sdk 这个不多说,同时推荐使用android studio,模拟器推荐使用Genymotion,比自带的AVD要快很多. 3. 安装C++环境 可以直接安装Visual Studio 2013或2015,也可选择单独SDK,编译node.js的C++模块需要用. 4. 安装node.js 从官网下载node.js, 我下载的

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

安卓环境配置 安装JDK 安装完成后,使用命令行检查版本 java -version 安装Android Studio 以及SDK 下载AS和SDK,建议使用http://www.androiddevtools.cn/,这里整理得比较清晰,SDK下载可能要使用国内镜像,具体使用上面的网址有介绍. 这里需要注意设置环境变量ANDROID_HOME 1. 打开控制面板,选择系统和安全->系统->高级系统设置->高级->环境变量->新建,变量名填写ANDROID_HOME,变量值填

在Windows下搭建Cocos2d-X的Android开发环境

在前面的博客中介绍了搭建Windows下的Cocos2d-X开发环境和搭建Windows下的Android开发环境,今天介绍搭建Cocos2d-X下的Android开发环境 在搭建Cocos2d-X下的Android开发环境前,首先要搭建好Windows下的Cocos2d-X开发环境和Windows下的Android开发环境 如果没有搭建好这两个环境可以看本人的博客 搭建Windows下的Cocos2d-X开发环境:http://blog.csdn.net/u010105970/article/

react-native —— 在Mac上搭建React Native Android开发环境

需要:JDK,Android SDK,Node.js 1.安装JDK 去Java官网下载列表选择Mac OS X x64版 2.安装Android SDK 虽然现在谷歌推荐使用Android Studio,但是我还是选择了单独安装Android SDK. 这是一个比较全的目录,上面的链接是官方的,有wall,用下面的基本都是网盘资源,速度还可以,记得修改Android SDK在线更新镜像服务器. PS:在Android SDK Manager里要装API 23的 安装完成后,一定要设置环境变量:

windows下搭建Apache+Mysql+PHP开发环境

原文:windows下搭建Apache+Mysql+PHP开发环境 要求 必备知识 熟悉基本编程环境搭建. 运行环境 windows 7(64位); Apache2.2;MySQL Server 5.5php-5.3 下载地址 环境下载 官方下载地址 Apache MySql PHP 至于我使用的版本已经上传到百度云提供大家下载了,这里就不多啰嗦了!! Apache Apache的安装和普通的应用程序安装没什么太大的区别,关键是配置.打开安装路径下的"conf\httpd.conf"文

react-native —— 在Mac上配置React Native Android开发环境排坑总结

配置React Native Android开发环境总结 1.卸载Android Studio,在终端(terminal)执行以下命令: rm -Rf /Applications/Android\ Studio.app rm -Rf ~/Library/Preferences/AndroidStudio* rm ~/Library/Preferences/com.google.android.studio.plist rm -Rf ~/Library/Application\ Support/A

Windows下搭建Eclipse+Android4.0开发环境

官方搭建步骤: http://developer.android.com/index.html 搭建好开发环境之前须要下载以下几个文件包: 一.安装Java执行环境JRE(没这个Eclipse执行不起来)和JDK 官网下载 http://www.oracle.com/technetwork/java/javase/downloads/index.html, 先装JRE,再装JDK,这个没什么说的,直接点击下一步就好了.... 二.安装Android SDK 下载地址:http://develop

windows下Qt5.2 for android开发环境搭建

windows下Qt5.2 forAndroid开发环境配置 1.下载安装Qt 5.2.0 for Android (Windows 32-bit)   http://qt-project.org/downloads 2.打开Qt Creator,打开帮助,输入android,找到官方说明,按照教程一步步的操作. 3.首先需要下载以下四个软件: 1)The Android SDK Tools  下载安装 2)The Android NDK  下载并解压,注意不能有空格   3)Apache An