专栏首页向治洪Android Studio环境下搭建ReactNative

Android Studio环境下搭建ReactNative

1.安装Android Studio 首先肯定是 安装Android Studio(包含SDK)(国内推荐) ps:这里有一点要注意,需要为SDK配置环境变量,名称必须为ANDROID_HOME

2.安装Nodo.js(自带npm) 从官网下载node.js的官方4.1版本或更高版本。 安装完成后建议设置npm镜像以加速后面的过程(或使用访问外国网站工具),也可使用nrm具体参考链接

npm config set registry https://registry.npm.taobao.org
npm config set disturl https://npm.taobao.org/dist

3.下载并安装Git for Windows。 在安装过程中,请务必记得勾选Run Git from Windows Command Prompt,这样会把Git的可执行程序加入到PATH环境变量中,这样其他程序才能在命令行中正确调用Git

4.安装genymotion(使用Android实体机调试的可以跳过此步骤) Android Studio自带的AVD速度实在不敢恭维,为了速度,安装genymotion 这个Android虚拟机,需注册,安装完成后,进入 genymotion 新建虚拟机即可。

下载genymotion

5.安装C++环境 推荐从itellyou下载并安装Visual Studio 2013或2015。也可选择Windows SDK、cygwin或mingw等其他C++环境。编译node.js的C++模块时需要用到。

6.安装Python 从官网下载并安装python 2.7.x

7.安装react-native命令行工具

npm install -g react-native-cli

8.创建react-native项目

react-native init RNTest

9.运行packager(服务端) 进入项目根目录运行

react-native start

npm start

10.安卓运行(参考ReactNative中文社区) 保持packager开启,另外打开一个命令行窗口,然后在工程目录下运行

react-native run-android

首次运行需要等待数分钟并从网上下载gradle依赖。 运行完毕后可以在模拟器或真机上看到应用自动启动了。 如果gradle依赖下载出现报错,请多试几次,或者设置V**加速。 如果apk安装运 行出现报错,请检查上文中安装SDK的环节里所有依赖是否都已装全,platform-tools是否已经设到了PATH环境变量中,运行adb devices能否看到设备。 至此,应该能看到APP运行,并报错 Unable to download JS bundle

摇晃设备或按Menu键可以打开调试菜单,点击Dev Settings,选Debug server host for device,输入你的正在运行packager的那台电脑的局域网IP加:8081(同时要保证手机和电脑在同一网段,且没有防火墙阻拦),再按back键返回,再按Menu键,在调试菜单中选择Reload JS,就应该可以看到运行的结果了。

配置服务器

如果真实设备白屏但没有弹出任何报错,可以在安全中心里看看是不是应用的“悬浮窗”的权限被禁止了。

11.遇到的坑(耽搁我一个通宵!!!) 在第9步中我们发现命令行窗口可以发现为该服务分配了8081端口,我们可以通过浏览器访问http://localhost:8081/index.android.bundle?platform=android查看返回JS是否正确。 不过一直.babelrc.stage 报错

解决方案就是去

RNTest\node_modules\react-deep-force-update

删掉.babelrc

12.日常环境开发配置(Android Studio + WebStorm) 走到这一步,可以关闭所有的窗口了

WebStorm配置

WebStorm配置

咱们用的是npm

照着配置一下,其实和第9步的一样

完成,运行

Android Studio

ps:Android Studio无需配置,只需import,不过import时候注意目录,是在ReactNative项目根目录的android目录下,否则Android Studio无法编译调试

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • npm管理工具介绍

    概述 Npm是NodeJS包管理工具,在最新版本中Nodejs集成了npm,可以通过输入 "npm -v" 来测试是否成功安装。如果你安装的是旧版本的 npm,...

    xiangzhihong
  • 即时通讯软件openfire+spark+smack

    所以我基本上分为三篇文章来介绍此类软件的开发: 第一篇是关于XMPP 协议是啥,IM 是啥以及一个比较有名的开源实现,该开源实现包括三个部分(Spark、Sma...

    xiangzhihong
  • android定义新的api解决一些低版本不能运行的问题

    Android Call requires API level 11 (current min is 8)的解决方案 【错误描述】     在用Eclipse开...

    xiangzhihong
  • IIS 部署 Python Django

    知道的,百度上搜出来的东西质量令人唏嘘。当你求助的时候多半还得靠自己,或者靠Google

    py3study
  • (2.5)James Stewart Calculus 5th Edition: Continuity

    如果在一个区间中,不包括a, 则在 a点不连续(f is discontinuous at a)

    dodo_lihao
  • 新加坡SCRY.INFO无域与中国最大IT技术社区CSDN达成区块链技术战略合作

    区块链大本营
  • 你以为玩VR的自己很帅气,然而事实却是......

    VRPinea
  • 服务熔断、降级、限流、异步RPC -- HyStrix

    在今天,基于SOA的架构已经大行其道。伴随着架构的SOA化,相关联的服务熔断、降级、限流等思想,也在各种技术讲座中频繁出现。本文将结合Netflix开源的Hys...

    哲洛不闹
  • 给你CVM服务器加把锁,如何使用SSH密钥

    SSH或安全shell是用于管理服务器和与服务器通信的加密协议。使用Ubuntu服务器时,您可能会将大部分时间花在通过SSH连接到服务器中。

    陈树丶
  • 一日一技:Python多线程的事件监控

    你创建了10个子线程,每个子线程分别爬一个网站,一开始所有子线程都是阻塞等待。一旦某个事件发生:例如有人在网页上点了一个按钮,或者某人在命令行输入了一个命令,1...

    青南

扫码关注云+社区

领取腾讯云代金券