写此文,我会严格按照我配置的过程写,如果你选择按照我的安,每一步都要一样,以免报错
如果你严格按照我说的配,仍然出错了,欢迎留言,我们一块解决。
现在装rn的环境越来简单了,可能是我熟悉了,可能最大的阻碍是有一些包下载的时候出现超时,这个时候你可以考虑切换成淘宝的,包含npm和android都是有相关的。
根据ReactNative0.57进行配置的,ReactNative最高支持Android8.1,以后会更新
更新日记(2021年1月28日):自0.60以后,运行rn项目不再通过react-native的方式,而是通过yarn或者npx;在装包的时候不需要手动link了,已经支持自动link了。ios端使用pod的方式了,所以在跑ios之前需要进入ios的文件夹下执行pod install,如果提示你没有安装,你安装以后继续即可。
一、进入ReactNative的官网
1.下载nodejs、python和JDK
百度网盘下载地址
官网地址(推荐)
二、安装上面的三个包
这三个包的安装都跟安装QQ一样,尽量不要更改盘符;在安装 python
的过程中可能会遇到 python to PATH
的字样,如果这个旁边有一个×,那么需要点进去换成第一个,这样就自动将环境配置好;安装完成以后打开终端 win+r
打开“运行”对话框,输入 cmd
回车,即可打开终端,在 windows
系统上叫提示符。
node --version
# 如果显示像 v10.15.0 这样的就代表成功
python --version
java -version
# 跟 nodejs 相同
这样就配置成功了,接下来安装react-native cli。
三、安装react-native
这个也是一样按照官方配置即可,我这里就复制复制。
npm config set registry https://registry.npm.taobao.org --global
npm config set disturl https://npm.taobao.org/dist --global
npm install -g yarn react-native-cli
yarn config set registry https://registry.npm.taobao.org --global
yarn config set disturl https://npm.taobao.org/dist --global
注意:现在官方推荐使用 npx
的方式,差别不大,只不过是在运行的时候在前面添加npx或者yarn而已,其他并没有什么区别。
通过以上几步已经成功安装好了ReactNative了
四、安装android studio
网盘下载地址:android studio3.1
android 官网下载地址
五、配置Android studio
官网里面说的很明白,就是严格按照上面的进行配置,千万不要投机取巧,每一步都不能省;我需要说明的是,在进入 Android SDK以后,严格按照上面的进行勾选,如果本身就勾选了其他的,你可以不管,只需要将要求的勾选上,其余的不动。
下面的那一步,也就是配置ANDROID_HOME
,这一步不能少,不管你是真机测试还是模拟器测试,这一步都是必须的,当然上面要求的都是必须的。
我把上面的工作做完成以后,我就新建了一个react-native项目。
react-native init TestApp --version 0.57.0
# 或
npx react-native init TestApp --version 0.61.3
这条命令的后面--version 0.57.0
是指定版本号,如果不写,那么创建的是最新版的RN项目。
完成以后,使用 android studio
打开了项目下的 android
文件夹,然后等待,直到上面的运行可以点击即可,可以点击以后就选择运行,然后选择模拟器,默认的即可;模拟器启动完成以后会自动打开项目,此时我的并没有成功。
接下来我打开命令行提示符,在这里说这条命令行提示符的命令:
cd dir
切换到dir目录下
dir
查看当前文件夹下所有的文件,包括隐藏文件
这两条命令足够我们使用了,其余的可以自学,也可以使用界面的方式进行操作。
进入到刚创建的项目下,必须要在创建的项目下,输入:
# 低版本 0.60 之前安装的 react-native
react-native run-android
# 或 0.60 发布以后都统一使用下面的命令启动
npx react-native run android
# 或
yarn android
# 或
npm run android
回车,然后等待命令行提示符出现可以输入命令的状态,此时可以看到nodejs的终端打开,而且打开的端口号是8081,但是此时并没有跑起来,此时找到模拟器里面刚安装的APP,这时就会看到nodejs终端里面跑起来了,等待跑完,跑到100%就能成功;到这儿我的都很顺利。
使用真机测试
- 接下来我尝试使用真机测试,使用真机测试需要打开开发者选项,每一种手机打开的方式不同,可以根据自己的手机查看;
- 如果你成功的完成了上面的操作,那么后面的就是使用数据线插到电脑上,此时可能会弹出一个对话框,选择存储,如果没有,可以选择滑下状态栏看看有没有,如果有就更改,如果以上两种都没有,那么说明你的数据线可能插得不好,或者不支持。
- 进入开发者选项里面,打开USB调试,
- 打开以后可能会弹出一个对话框,你选择确认即可;
- 在项目中同样运行上面的命令
yarn android 或 react-native run android
;
直到手机上出现显示的结果,双击r刷新,如果成功,可以打开项目里面App.js,对里面的内容进行修改,然后选择模拟器,双击r,看看刷不刷新;我的到这儿出现了错误:
Unable to load script from assets 'index.android.bundle'. Make sure your bundle is packaged correctly or you're running a packager server?
就是这样的错误,按照下面的博客进行操作即可成功,Unable to load script from assets 'index.android.bundle'. Make sure your bundle is packaged correctly or you're running a packager server?
需要说明的是:里面的那一条命令:
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
上面的index.js这个的看自己的项目,如果项目中有index.android.js和index.ios.js就将上面的替换成index.android.js
可能你通过网上的很多资料,看到可能说因为你电脑上没有安装adb驱动,此时你首先看一看你的手机能不能连接电脑,如果能,说明并不是这里的原因。
到这里你可能不能实时刷新,这样的话,参照这个博客React-Native项目在Android真机上调试
六、配置VScode,使其支持RN
安装完成以后,你编写代码能够提高开发效率,下面是一个别人写的博客的地址,非常感谢他,配置VScode开发reactNative
七、使用android studio 打包可能会出现跟图片相关的问题
下面这个使解决方案,解决图片问题:android studio 打包出现图片问题,使用此教程,如果使其他问题,先clean,然后重新生成index.android.bundle,生成命令在上面。
在博客中使用的所有其他的博客,我表示对你们的感谢,是你们帮我解决了很多很多问题,同时我也希望,各位能够说出我的不是。
七、使用VScode开启debug模式
配置debug模式网上很多教程,也比较简单,就是下载扩展,搜索react-native-tools,安装,然后点开debug,第一次可能提示没有配置debug,这个需要配置,选择配置,这个时候可能会出现一个文件,也有可能出现一个选择的对话框,出现对话框直接选择react-native即可,如果直接出现文件,launch.json文件,注意看文件右下角有一个“Add Configuration”,点击即可,然后选择debug android或debug ios,这样就可以了,至于出现的那些参数的含义,react-native-tools里面有说明,一般不需要特别配置里面的参数就能使用,默认跟在终端中使用react-native run-android差不多,配置好了以后再进入debug中,选择你配置中的那一项即可,然后等待启动,,如果出现错误react-native ERROR EPERM: operation not permitted,则按照下面这个博客的方法进行即可,我得提醒的是,在这开始之前,配置环境中的任何一步都走得对,如果仍然不行可以检查是不是有一步漏走了。react-native ERROR EPERM: operation not permitted解决方案