React-Native 准备工作
1.环境准备: node、Python2x、JDK和 Android Studio。
注意Node的版本应大于等于 12,Python 的版本必须为 2.x(不支持 3.x),而 JDK 的版本必须是 1.8(目前不支持 1.9 及更高版本,注意 1.8 版本官方也直接称 8 版本)。安装完 Node 后建议设置 npm 镜像(淘宝源)以加速后面的过程(或使用科学上网工具)。
2. 软件简介
Node:简单的说 Node.js 就是运行在服务端的 JavaScript。
Node.js是一个基于Chrome JavaScript 运行时建立的一个平台。
Node.js是一个事件驱动I/O服务端JavaScript环境,基于Google的V8引擎,V8引 擎执行Javascript的速度非常快,性能非常好。
node官方文档:http://nodejs.cn/api/
Python2x:跨平台的计算机脚本语言
JDK : java编译环境在RN中的作用在于,提供给android studio用于android开发.
Android studio: android开发工具
3. 编译react-native项目
Yarn:Yarn是 Facebook 提供的替代 npm 的工具,可以加速 node 模块的下载。
创建项目
cd到指定文件夹创建项目npx react-native init name
此时可能会出现如下错误: Cannot initialize new project: because directory“my”already exists.意思是无法创建新项目,因为文件目录下存在文件夹
也就是我们需要重新命名项目、再次运行,可以看到如下,已经开始创建项目了
项目已经创建完毕,分别有IOS、Android、PC三种,可以看到Android官方已经提供了提示npx ract-native run-android 来运行项目
到此,我们的项目已经创建完成,接下来我们需要开发项目则需要,将此项目添加到开发工具中
调试运行
运行项目有两种方式:(注意:无论使用哪种需要优先使用cmd命令运行项目一次)
①使用android studio
首先打开Android Studio
找到我们刚刚生成的项目导入
导入之后可能会提示
这里配置之后可能会遇到一些gradle的问题,只要保证本地存在或者按照提示下载gradle配置相应版本即可,这里就不多说了.
② 使用cmd运行命令npx react-native run-android 来运行项目
注意: 不要使用bundle来编译,会导致js文件无法刷新:
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
可以看到此时正在安装项目,其中有个erro意思是加载我们的设备失败,也就是我们需要将手机连接到电脑,并开启usb调试模式.
选择安装方式根据自身情况可选择,两种方式均可实现启动项目.
注意:运行方式不可交叉使用会导致build文件错误,解决方法将build删除重新rbuild
最后运行出现build successful说明安装成功