找了很多的资料,react native 的资料本来就少,结果关于 android 的更少,与项目启动有关的就少之又少了,所以我要赶紧记录下来,以免忘记。
项目创建完成后,用自己喜欢的编辑器打开,我喜欢用的编辑器是 webstorm,
简单明了,有一个 tests 文件夹,一个 android 文件夹,毋庸置疑,是 android 用的,一个 ios 文件夹,是 ios 用的,还有 index.android.js 和 index.ios.js ,android 和 iOS 的启动程序都是写在这里的。
下面就是如何启动项目了。
亲测,iOS 启动很简单,在 ios 文件夹下 有 reactNativeProject.xcodeproj 该文件夹用Xcode 打开,没有 Xcode 就先赶紧去安装吧, 就在 App store 中就有,下载起来颇费时间。
xcode 启动起来了,这个时候电脑已经卡爆了!!!
这个地方是可以选择机型的,我选择的是 iphone7,run 起来后,带着手机的这个东西就会出现:
刚开始启动起来时,虚拟机简直巨大无比,后来找了半天调节的地方。在虚拟机的 window下面,我选择的是 50%, 这个时候整个大小就是手机一般了。
手机出来后,滑动手机找到我们的项目程序软件,点击打开。
虽然启动的很慢,但最终还是打开了。
相对于 iOS, android 的就坑爹的多了。
android 的打开方式有很多种, 一种是命令行,把手机连在电脑上,并打开 USB 调试模式,在终端进入该项目, react-native run-android 就可以了,但是我的跑了半天,终端做了很多动作,最后竟然告诉我未启动,而我也不明原因,捣鼓了好久也没反应。在我都快放弃的时候,灵光乍现,既然 ios 的就可以用 Xcode 打开,那 android 的是否就能用 android studio 打开呢,结果一试,还真是这样。
用 android studio 打开 android 文件夹,然后 run 就可以了。
但是 android 坑多,我现在总结的是我遇到的问题。
首先是启动不起来,android studio 控制台报错: 反正原因是支持的最小版本不统一。然后我找了半天,发现在 AndroidManifest.xml 中和在 build.gradle (这里有两个build.gradle,但是只有一个里面有最小版本的限制)中,最小版本限制不统一,一个是14,一个是16,最后我都改成了16,Rebuild 了一下项目,再次跑起来时就没有报错了。
但是这并没有结束,手机打开程序之后,显示空白。这里需到手机里修改权限设置,将悬浮窗权限放开,每个品牌的手机打开权限方法都不同,所以这里就不罗列了。
再次打开软件,火红的界面,明显在报错嘛!
找了半天,网上也有解决办法,不过命令行的那个对我不起作用,而是在 package.json 中修改了scripts 中的代码,最后修改后的如下:
"scripts": {
"build":"(cd android/ && ./gradlew assembleDebug)",
"start":"node node_modules/react-native/local-cli/cli.js start",
"test":"jest",
"bundle-android":"react-native bundle --platform android --dev false --entry-file index.android.js --bundle-output android/app/src/main/assets/index.android.bundle --sourcemap-output android/app/src/main/assets/index.android.map --assets-dest android/app/src/main/res/"
},
再次重启软件,为了保险,我先 rebuild 了一下,这次终于正常启动了。
界面和 ios 的一样。
还有一点需要注意,react-native 记得跑起来。
办法很简单:cd 进项目包
react-native start 就可以了。