ReactNative学习笔记（一）环境搭建

前言

本文开发环境为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.bundle和index.android.bundle.meta这2个文件，然后再次运行应该就没问题了。

参考

react-react-native-的es5-es6写法对照表

React Native官方指南