ReactNative学习笔记(一)环境搭建
本文由 小茗同学 发表于 2016-10-14 浏览(1515)
最后修改 2018-03-15 标签:react reactnative android

前言

本文开发环境为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 23
	buildToolsVersion "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 call
	java.lang.RuntimeException: Could not get BatchedBridge, make sure your bundle is packaged correctly
	at 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官方指南