当前位置: 首页 > news >正文

react-native 安卓真机环境搭建

前言

最近在学习react-native,也做了几个简单的小demo,附上地址 react-native 安卓app

在android平台开发的时候,环境搭建还是蛮麻烦的,在这里总结一下我自己搭环境遇到的一些坑,供参考。

正文

这是我在搭建react-native 安卓开发环境遇到的一些坑和解决方法,记下来防止以后能用到。也是看了网上许多人的答案,感谢大家的帮助。
第一步:安卓依赖环境

首先下载安卓sdk https://dl.google.com/android...

clipboard.png

接下来配置安卓sdk系统变量,这个可以参考网上内容

http://reactnative.cn/docs/0....

第二步:配置node环境

由于npm环境在国内有点麻烦,所以为了方便切换npm源到淘宝的镜像 cnpm,需要先安装nrm模块

npm install -g nrm

淘宝镜像安装

npm install -g cnpm --registry=https://registry.npm.taobao.org

然后运行 nrm use cnpm 就可以了

这个可以解决 react-native init project 时候npm下载失败的问题

网上说node版本需要4.0以上,不然会有问题

npm版本也需要升级,我开始是2.xx版本,一直报错,

clipboard.png

npm升级到 3.7.3就成功了

推荐node版本 4.1.2,之前4.2.4 react-native start 导致内存溢出

第三步:下载react-native

下载react-native npm install -g react-native-cli

新建一个目录 react ,在目录下运行

react-native init project (之前由于没有切换npm源导致一直失败,改了之后就一次性成功了)

第四步:运行react-native android 程序

在之前react-native init project 之后

cd project 然后 react-native run-android

这个是最关键的也是问题最多的,这个过程第一次安装一般比较缓慢,我一直运行了23分钟,要耐心等待

问题1:确保手机连接成功了,不然会遇到下面这种情况

clipboard.png

问题2

clipboard.png

这个问题也不是很清楚为什么,后来再stackoverflow 上找到答案

clipboard.png

把android的build.gradle 文件里面的第八行改成 classpath 'com.android.tools.build:gradle:1.2.3' 就可以了

问题3

clipboard.png

网上找了个图,我碰到的是23.0.1,这种情况应该就是android sdk没弄好,下载了之后就可以了

clipboard.png

问题4

网上截了个图,我用的是小米(坑),这个情况的解决方案竟然是

clipboard.png

小米手机设置里-------开发者选项---------启用MIUI优化关闭

然后我就一次性安装成功了,没有白屏,如果有白屏的情况,我看网上是这样解决的

设置里找到应用管理,我们安装的project应用权限管理里面,打开悬浮窗权限就可以了

这个也是要开启的,因为调试时候会用到

截个图纪念一下

clipboard.png

第五步:开发

为了像浏览器一样改了代码就能立马看到,需要再多设置一下

拿起你的手机摇一摇,弹出悬浮窗,点击Dev Settings 然后点击 Debug server host & port for device

在这里输入你电脑的ip(查看方法:cmd窗口输入 ipconfig),8081是固定端口号,前面是你的ip(网上有些人运行报错也可以这样解决,我这里直接成功没有遇到红屏报错情况)

设置完成后,简单修改一下页面index.android.js,按物理设置键,选择Reload JS,程序就刷新了,

clipboard.png

总结

至此,程序就能正常的运行了。

附上一些参考文档:

http://reactnative.cn/docs/0....

React-Native android在windows下的踩坑记

react-native在Anroid真机运行时可能会遇到白屏的情况解决办法

android - react-native :app:installDebug FAILED

以上都是个人看法,如果有误,感谢指导!

相关文章:

  • vue3 自定义hook函数 和 toRef
  • git add . 的时候遇到warning: LF will be replaced by CRLF in ...... 解决办法
  • vue3 祖孙组件通讯传值 provide 与 inject 以及 响应式数据的判断
  • Unity3D 学习——入门资料整理
  • vue3父子组件传值 以及注意事项
  • “通过jumpserver远程登录linux服务器,rz上传文件速度过慢”问题的解决
  • vue项目 初始化 解决页面闪屏问题 v-cloak
  • Excle中LOOKUP经典用法
  • vue3实现 TodoList 运用到的点 组件传值props, ref, onMounted, reactive, toRefs, watch
  • 前端——运用@media实现网页自适应中的几个关键分辨率
  • vue3 实现 todoList 知识点 reactive, toRefs, computed, watchEffect, filters,localStorage数据存储、获取
  • vue 项目 前端 模拟后端接口数据(vue2,vue3)
  • JSON.toJSONString的jar包问题
  • vue3-cli创建项目后每个文件的第一行都爆红,或者每个文建都 : No Babel config file detected for...
  • vue3路由传参 query 、params
  • [PHP内核探索]PHP中的哈希表
  • Google 是如何开发 Web 框架的
  • JavaScript 如何正确处理 Unicode 编码问题!
  • 《用数据讲故事》作者Cole N. Knaflic:消除一切无效的图表
  • docker容器内的网络抓包
  • git 常用命令
  • golang中接口赋值与方法集
  • in typeof instanceof ===这些运算符有什么作用
  • input的行数自动增减
  • js算法-归并排序(merge_sort)
  • MySQL常见的两种存储引擎:MyISAM与InnoDB的爱恨情仇
  • Yeoman_Bower_Grunt
  • 不用申请服务号就可以开发微信支付/支付宝/QQ钱包支付!附:直接可用的代码+demo...
  • 大快搜索数据爬虫技术实例安装教学篇
  • 等保2.0 | 几维安全发布等保检测、等保加固专版 加速企业等保合规
  • 动态魔术使用DBMS_SQL
  • 如何编写一个可升级的智能合约
  • 使用 Node.js 的 nodemailer 模块发送邮件(支持 QQ、163 等、支持附件)
  • 微信小程序开发问题汇总
  • 线性表及其算法(java实现)
  • 一个普通的 5 年iOS开发者的自我总结,以及5年开发经历和感想!
  • 一些关于Rust在2019年的思考
  • 用 Swift 编写面向协议的视图
  • 用 vue 组件自定义 v-model, 实现一个 Tab 组件。
  • 用Visual Studio开发以太坊智能合约
  • 《天龙八部3D》Unity技术方案揭秘
  • 仓管云——企业云erp功能有哪些?
  • 树莓派用上kodexplorer也能玩成私有网盘
  • 昨天1024程序员节,我故意写了个死循环~
  • #laravel 通过手动安装依赖PHPExcel#
  • #中国IT界的第一本漂流日记 传递IT正能量# 【分享得“IT漂友”勋章】
  • (C语言)字符分类函数
  • (非本人原创)史记·柴静列传(r4笔记第65天)
  • (蓝桥杯每日一题)love
  • (求助)用傲游上csdn博客时标签栏和网址栏一直显示袁萌 的头像
  • (三)Hyperledger Fabric 1.1安装部署-chaincode测试
  • (一)UDP基本编程步骤
  • (转)微软牛津计划介绍——屌爆了的自然数据处理解决方案(人脸/语音识别,计算机视觉与语言理解)...
  • .bat批处理(九):替换带有等号=的字符串的子串
  • .Net FrameWork总结