ReactNative学习笔记(一)环境搭建

2021年09月15日 阅读数:1
这篇文章主要向大家介绍ReactNative学习笔记(一)环境搭建,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

前言

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

环境搭建

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

安装前请准备如下环境:java

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

首先安装react-native-clinode

npm install -g react-native-cli

而后咱们新建一个helloworld项目,连上你的手机:python

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

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

HelloWorld运行效果以下:android

W303xH184

可是!es6

我估计通常人都不会这么一路顺风!继续日后看!npm

启动和运行

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

可能碰到的几个错误

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:

W446xH163

打开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/

运行截图:

W661xH430

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

参考

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