前言

本文开发环境为Windows,目标平台为Android,react-native版本为0.35.0

环境搭建

注意,本文不是按照官网的教程来的,官网说必须安装什么Chocolatey,我懒得鸟它。

安装前请准备以下环境:

  • jdk(必须1.8或更高版本)
  • node.js & npm
  • python2(注意不支持python3,我的是2.7)
  • android sdk(并且已经配置好相关环境变量)

首先安装react-native-cli

npm install -g react-native-cli

然后我们新建一个helloworld项目,连上你的手机:

cd 你的工作目录
react-native init helloworld
cd helloworld
react-native run-android

不出问题的话,一个ReactNative的HelloWorld项目就已经成功运行你的手机上了,
生成的apk在helloworld\android\app\build\outputs\apk目录下。

HelloWorld运行效果如下:

但是!

我估计一般人都不会这么一帆风顺!继续往后看!

启动和运行

如果平时只是修改一些js和图片,没有重新编译需求的话,只需要执行react-native start启动packager,然后手动打开apk,这种方式更快。react-native run-android则会先重新打包应用,然后启动packager,最后启动你的应用,比较慢。

可能碰到的几个错误

failed to find Build Tools revision 23.0.1

在执行react-native run-android时你可能报如下错误:

failed to find Build Tools revision 23.0.1

打开Android SDK目录,发现没有安装23.0.1:

打开helloworld\android\app\build.gradle文件,将buildToolsVersion从23.0.1改为23.0.2:

android {compileSdkVersion 23buildToolsVersion "23.0.2"
}

再次重新运行react-native run-android应该就没问题了。

当然你也可以启动SDKManager下载安装Build Tools revision 23.0.1

启动后白屏,控制台报错

不知为何,我碰到的情况是,apk已经输出成功了,安装到4.4的模拟器时没有任何问题,能够正常启动,但是安装到手机时(LG-G3,刚刷机成MIUI7,Android4.4系统)却提示如下错误:

10-14 14:18:33.647 6526-6526/com.helloworld E/unknown:React: Exception in native calljava.lang.RuntimeException: Could not get BatchedBridge, make sure your bundle is packaged correctlyat com.facebook.react.cxxbridge.CatalystInstanceImpl.loadScriptFromAssets(Native Method)at com.facebook.react.cxxbridge.JSBundleLoader$1.loadScript(JSBundleLoader.java:33)at com.facebook.react.cxxbridge.CatalystInstanceImpl.runJSBundle(CatalystInstanceImpl.java:177)at com.facebook.react.XReactInstanceManagerImpl$4.call(XReactInstanceManagerImpl.java:918)at com.facebook.react.XReactInstanceManagerImpl$4.call(XReactInstanceManagerImpl.java:911)at com.facebook.react.bridge.queue.MessageQueueThreadImpl$1.run(MessageQueueThreadImpl.java:74)at android.os.Handler.handleCallback(Handler.java:733)at android.os.Handler.dispatchMessage(Handler.java:95)at com.facebook.react.bridge.queue.MessageQueueThreadHandler.dispatchMessage(MessageQueueThreadHandler.java:31)at android.os.Looper.loop(Looper.java:136)at com.facebook.react.bridge.queue.MessageQueueThreadImpl$3.run(MessageQueueThreadImpl.java:196)at java.lang.Thread.run(Thread.java:841)

其中,关键错误信息是:

Could not get BatchedBridge, make sure your bundle is packaged correctly

解决办法:定位到helloworld根目录,执行如下命令:

react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

运行截图:

这一步会在android/app/src/main/assets/下面生成index.android.bundleindex.android.bundle.meta这2个文件,然后再次运行应该就没问题了。

参考

react-react-native-的es5-es6写法对照表
React Native官方指南

ReactNative学习笔记(一)环境搭建相关推荐

  1. 深度学习(二)theano学习笔记(1)环境搭建

    theano学习笔记(1)环境搭建 原文地址:http://blog.csdn.net/hjimce/article/details/46654229 作者:hjimce 搭建theano实属不易,因 ...

  2. Go学习笔记_环境搭建

    Go学习笔记_环境搭建 Go背景知识 go的特点(官网): Build fast, reliable, and efficient software at scale- Go is an open s ...

  3. Django学习笔记 开发环境搭建

    为什么使用django? 1.支持快速开发:用python开发:数据库ORM系统,并不需要我们手动地构造SQL语句,而是用python的对象访问数据库,能够提升开发效率. 2.大量内置应用:后台管理系 ...

  4. cocos2d-x lua 学习笔记(1) -- 环境搭建

    Cocos2d-x 3.0以上版本的环境搭建和之前的Cocos2d-x 2.0 版差异较大的,同时从Cocos2d-x 3.0项目打包成apk安卓应用文件,搭建安卓环境的步骤有点繁琐,但搭建一次之后, ...

  5. HarmonyOS_BearPi-HM Nano学习笔记之环境搭建

    前言:期待了已久的小熊派鸿蒙开发板终于出世了,12月11号准时抢到优惠券,果断下单,运费一起也就是29.9,实话说,很划算的,毕竟对自己的学习投资嘛,得舍得. 下面我把代码仓库.资料.视频课程地址贴出 ...

  6. 移植u-boot1.1.6到友善mini2440学习笔记之环境搭建(系列之一)

    前记:两年前就想学习ARM,由于一些原因耽搁了下来.如今迫于找硬件岗位工作的压力,不得不硬着头皮学习ARM,以前就知道ARM入门是计较困难的,如今真是体会深切啊,全是心酸泪,不仅自己的无知跟自己作对, ...

  7. Linux学习笔记1—环境搭建

    文章目录 一.Linux是什么? 二.购买云服务器搭建Linux环境 1 Xshell 1.1 Linux下简单的用户管理 1.2 Xshell的复制粘贴 2 vscode+RemoteSSH插件 3 ...

  8. wepy学习笔记之环境搭建

    写了近两年小程序了,越来越发现原生小程序有太多鸡肋的地方.所以今天准备尝试一下wepy,正好最近手上有个外包,可以拿来练手.如果可以的话,或许会出一系列wepy相关的文章(偏实战),欢迎大佬们指正. ...

  9. Python学习笔记1环境搭建+Numpy

    Python環境安裝 系統環境path裡面配置安裝路徑打開cmd輸入py查看是否安裝路徑:D:/sofeware/python3.8 配置系統環境變量(可以安裝時選擇本身就配置) [外链图片转存失败, ...

  10. node学习笔记_01 环境搭建

    一.下载安装nvm (node版本管理器),方便以后版本切换 nvm list            -> 查看node版本(版本最好在8.0以上,不然在vsCode断点调试进不去,跟node版 ...

最新文章

  1. break continue 016
  2. linux下使用idl生成h文件,LINIUX下IDL的安装
  3. 马哥linux脚本,linux学习 – shell脚本
  4. python策略模式包含角色_详解Python设计模式之策略模式
  5. fatal: unable to access ‘https://XXXXX‘: : OpenSSL SSL_read: Connection was reset, errno 10054……
  6. Mac上IDA报错/:Permission denied Please specify another file path for the database
  7. 售假获刑后他又被淘宝告上法庭,杭州互联网法院当庭宣判
  8. 用正则表达式抓取网页图片
  9. 赠人玫瑰,手有余香,今日份黑科技软件五款奉上
  10. 绘制qq群的基础用例图_首次绘制出“氟化氢”地图:间接实现追踪宇宙中最常见的分子氢!...
  11. java P1195 口袋的天空
  12. 天行健,君子以自强不息;地势坤,君子以厚德载物 释意
  13. 【con】rounded不起作用(前端bug日记3)
  14. 音频测量常见的校准原理 ADC灵敏度校准 DAC频率响应校准 麦克风校准 Soundcheck软件校准
  15. 「项目实战」一文读懂思科网络设备IOS系统
  16. 英特尔第十代处理器为什么不支持win7_10代cpu能不能装win7?10代cpu装win7全面分析(支持十代...
  17. 开发人员常用工具最全锦集(持续更新)
  18. 浅谈大数据及相关技术在计算机专业的应用
  19. 常用材料的弹性模量、泊松比、密度
  20. 【EduCoder答案】搜索问题与技术

热门文章

  1. 为何优秀的Java程序员如此难招?
  2. 根据ip获得国家,省,城市,运营商
  3. 怎样用VB编写.DLL动态链接库文件 1
  4. 稳定菜篮子市场供需 农业大健康-林裕豪:从玉农业全力保障
  5. 世界农业趋势-国际农民丰收节贸易会: 新技术谋定生产过程
  6. -Git Linux vi/vim 命令 按键 MD
  7. Selenium+python --获取百度联想词
  8. [XUPT_ACM]寒假第一次比赛题解
  9. 面试题4:二维数组中的查找
  10. Selenium自动化中DOM,XPATH,CSS定位Web页面对象的优劣性分析