码迷,mamicode.com
首页 > 移动开发 > 详细

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

时间:2016-05-07 09:31:02      阅读:332      评论:0      收藏:0      [点我收藏+]

标签:

安卓环境配置

安装JDK

安装完成后,使用命令行检查版本 java -version

安装Android Studio 以及SDK

技术分享
下载AS和SDK,建议使用http://www.androiddevtools.cn/,这里整理得比较清晰,SDK下载可能要使用国内镜像,具体使用上面的网址有介绍。
这里需要注意设置环境变量ANDROID_HOME
1. 打开控制面板,选择系统和安全->系统->高级系统设置->高级->环境变量->新建,变量名填写ANDROID_HOME,变量值填写你把Android SDK解压后放置的位置。
2. 设置PATH 值为 %ANDROID_HOME%\tools;%ANDROID_HOME%\platform-tools
注意 如果你的电脑已经配置了环境变量,要么把安装的SDK安装到配置的目录里面,要么需要修改环境变量的值为最新安装的

安装Git

Windows上请下载并安装https://git-for-windows.github.io/。在安装过程中,请务必记得勾选Run Git from Windows Command Prompt,这样会把Git的可执行程序加入到PATH环境变量中,这样其他程序才能在命令行中正确调用Git。
同样注意,如果已经安装Git,环境变量的替换问题。

安装Node

下载地址:https://nodejs.org/en/

下载node.js,找好对应的版本,然后去安装就可以了,版本至少要4.1以上。
大家可以通过node -v的命令来测试NodeJS是否安装成功、
注意 在下载的时候因为是国外网站,浏览器经常断开重下,最好复制下载链接使用迅雷/百度云下载

安装React-Native 命令行工具react-native-cli

  • 在命令行中进入你希望React Native安装的目录
  • 输入git clone https://github.com/facebook/react-native.git,等待下载(较慢)
  • clone成功后,进入刚刚目录下的react-native目录下的react-native-cli目录,输入npm install -g

注意 这里需要科学上网工具,免费工具 推荐使用Google蓝灯;如果速度还是太慢可以使用国内淘宝镜像(我自己使用 貌似没有成功)输入命令:
npm install -g cnpm –registry=https://registry.npm.taobao.org

创建项目 react-native init

进入你想创建项目的目录下:
输入react-native init AwesomeProject,很长一段时间,AwesomeProject是他的一个示例项目
下载成功后目录:
技术分享
推荐使用JetBrains的WebStorm来编写JS代码。免费试用30天,或者破解在线Key [WebStorm注册码获取(http://idea.qinxi1992.cn/)
使用AndroidStudio来编译Android

检查环境变量设置

再次检查Node Git SDK platforms platforms-tools Java 环境变量配置是否正确

运行项目

  • 在命令行中进入项目目录,输入react-native start,运行服务器代码。技术分享
  • 在浏览器中打开http://localhost:8081/index.android.bundle?platform=android,如果得到以下页面,表示服务已经开启
    技术分享
  • 不要关闭上一个命令行,新开一个命令行工具,输入react-native run-android.第一次运行因为没有配置Gradle所以会在线下载,比较慢
    技术分享
    然后下载完Gradle后:
    技术分享
    -如果是真机,第一次运行肯定会报错
    技术分享
    需要让手机和电脑处于同一个wifi网络下,然后设置端口信息
    技术分享
    技术分享

注意

  • 有些Android手机,运行React Native成功后,只得到一个白屏,什么都没有,这是因为手机的悬浮窗口权限被禁止了,要先去设置页面打开技术分享
  • 一个项目的react-native start 和 react-native run-android一一对应,不要用项目A开启服务后,却去启动项目B,这样也是可以运行和调试,但是运行中会报错。
  • 如果感觉react native init命令执行太慢,可以直接下载项目编译。下载地址ReactNative中文网官方发布完整新项目包
  • 长按菜单键,弹出菜单选项进入调试模式

参考文档
reactnative.cn
最详细的Window 配置ReactNative

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

标签:

原文地址:http://blog.csdn.net/zivensonice/article/details/51333039

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!