在第一次使用react-native时,遇到的问题就是在运行react-native run-android时报错
FAILURE: Build failed with an exception.
* What went wrong:
Could not determine java version from '9.0.1'.
网上有些人说这是由于Android Studio的gradle版本过低,与Java 9.0不兼容,建议升级gradle版本,然而升级之后gradle的sync又出现了错误,由于对gradle使用不是很熟悉,我选择第二种解决办法,降低java版本。
在Windows程序卸载中将Java 9卸载,重启电脑,到官网下载Java 8,之后报错消失。下面记录安装配置react-native的过程:
1、安装配置JDK、SDK
从官网下载安装Java 8,按照安装提示点击下一步,直到安装完成JDK、JRE。
配置环境变量:在Windows环境变量中添加变量JAVA_HOME,路径为JDK的安装位置,并在系统环境变量PATH中添加%JAVA_HOME%\bin。
再添加环境变量CLASSPATH:
.;%JAVA_HOME%\lib;%JAVA_HOME%\lib\dt.jar;%JAVA_HOME%\lib\tools.jar;
在安卓官网下载SDK,按提示安装,注意react-native要求必须有Android6.0(API23)。
在环境变量中添加ANDROID_HOME路径为SDK安装位置,并在PATH中添加%ANDROID_HOME%\platform-tools与%ANDROID_HOME%\tools
2、安装react-native
JavaScript的编译需要node,react-native下载需要npm,而npm集成在node中,所以需要安装node。从Node官网下载node.js,按下一步提示完成安装。
配置npm镜像位置,由于npm仓库在国外网站,将npm配置为淘宝镜像,可以加速npm的执行以及在项目初始化时下载速度:
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
之后通过npm全局安装react-native脚手架工具:
npm install -g react-native-cli
3、创建项目
进入到项目所放置的文件夹,按下shift+鼠标右键,在此处打开power shell窗口,在power shell中输入
react-native init 项目名称
此过程大约十几分钟,之后就可以看到在目录下建好了react-native项目。
注意:项目名称需要为英文,且文件夹路径中不要包含中文。
react-native命令要在powershell或以管理员身份运行,否则会出现读取权限之类的错误。
4、运行项目
4.1虚拟机运行
首先启动react-native本地服务器:在项目所在文件夹下的命令行内输入react-native start或者npm start,可以看到项目的后台服务器启动,并且在localhost:8081端口可以看到返回数据。如果直接运行,会看到红色的屏幕,上面提示
Unable to load script from asset ‘index.android.bundel'.Make sure your bundle is packaged correctly or you're running a package server.
打开AndroidStudio,导入项目中的android文件夹,等待gradle构建完成后,点击绿色的运行按钮,启动虚拟机,就可以在虚拟机中看到项目界面了。
4.2真机调试
首先在手机设置开发者选项中打开usb调试并允许通过usb安装应用,将手机通过USB线连接到电脑,在命令行输入adb devices可以看到连接的设备。
然后在项目所在文件夹下打开命令行输入react-native run-android,可以看到它会自动打开一个服务器窗口,并且编译安装到手机上。
1、通过USB调试(仅适用于Android 5.0以上)
在命令行输入adb reverse tcp:8081 tcp:8081
,不需要其他设置,点击reload就可以看到界面了。
2、通过WIFI调试
如果在调试时不想通过USB连接电脑,可以利用WIFI来调试,确保手机与笔记本在同一个局域网下,在手机APP中上打开菜单(没有菜单按钮的可以晃动手机),选择Dev settings->Debug server host & port for device,输入你笔记本的IP地址+:8081,例如:192.168.1.1:8081。接着reload,这样就从电脑服务器同步到你的手机上。在菜单中Enable Live Reaload开启实时重载,当你在电脑上修改了界面时,手机端会自动加载。
4.3在WebStorm中启动ReactNative项目
react-native开发的主要代码是Javascript,我们依旧使用前端开发工具webstorm。在webstorm中已经集成了react-native工具,可以快速启动项目而不需要再打开命令行工具手动启动。在webstormIDE右上方有个Edit Configurations的按钮,点开之后添加React-Native工程,按提示配置完成后点击运行即可启动ReactNative,这时候可以在虚拟机或真机上查看。