持续创作,加速成长!这是我参与「掘金日新计划 · 6 月更文挑战」的第1天,点击查看活动详情
「前言」
使用expo开发React Native项目有一段时间了,开发的过程中,踩了不少坑,目前还在踩坑中。在没有了解expo之前,我用React Native写了一个裸的跨平台项目,在安装一些三方和使用原生功能(相机,相册,定位,上传,蓝牙等等),要对andriod和iOS进行不同的适配,(React Native在国内的社区好像并不是很好,很多问题都查不到,只能去看国外论坛),适配的过程中,又费时间,坑还多。而且我之前是做iOS的,对原生应用了解,如果是没有开发过移动端的前端同学。对移动端的访问权限,控制器的压栈原理,状态栏,导航栏等等这些都不是很清楚的话,适配起来会更痛苦。
好在我发现了expo,这玩意儿是真的香。让我们开发一款能在iOS和andriod上跑起来的app,太方便了。调试,权限,真机运行,打包,发布,省了很多事。
这里简单说一下我选择React Native而没有选择Flutter最重要的两个原因:(什么?uni-app?没了解过)
- 其实我是做iOS后来转的前端,Flutter对于做过原生移动端开发的人是友好的,但是对于公司其他前端同学可能就不友好了,总而言之就是学习成本低,会JS就行
- Flutter在性能上会好一点,但是当一个项目决定使用跨平台技术去开发的时候,我是觉得就不要再去比性能了,就比开发速度吧
老板要的就是快!!!显然我觉得React Native的效率比Flutter高
不过有一说一,在国内Flutter的社区比React Native做的好多了,React Native的不少问题都百度不到,我很多问题都是去github上看论坛,一行一行翻下去,才看到的。所以自己就想记录一下开发中遇到的问题,方便以后自己回看,同时也分享给同样在踩坑React Native的同学
环境搭建
React Native官网的教程很详细,跟着官网的步骤来就好。搭建开发环境
什么是Expo?
Expo是一组工具、库和服务,可以通过编写JavaScript来构建本地的iOS和android应用程序。说人话,就是在React Native的基础上再封装了一层,让我们的开发更方便,更快速。
- 做过移动端的同学在做跨平台之前肯定会担心一个点,就是各种原生功能(相机,相册,定位,蓝牙等等),使用expo的话,会比你开发一个裸的React Native真的会快很多,而且会少踩很多坑
- 没有做过移动端的前端那就更需要这个了,不然移动端的一些隐藏的限制和坑,会让你很头疼
项目搭建
安装Expo
npm install --global expo-cli
创建项目
expo init my-project
这里注意,选择默认的第一个选项就好,会创建一个基本的app
运行项目
expo start
运行后,根据上图对应的提示,启动对应的模拟器就好了,(iphone模拟器只能运行在mac电脑上),就可以看到这个项目的初始化样子了。
如果想在真机上运行,下载Expo Go App,iphone可以直接在App store里面找到,下载就好。安卓在谷歌商店也能找到。下载好后,通过相机扫码就可以安装到手机上了,打开Expo APP就可以看到了
注意点!!!一定要看:
-
iphone最新版本的Expo GO,需要登录才能扫码安装app,去Expo官网注册一个账号就好。登录完成后,点击首页的右上角可以切换账号,这个可能是Expo的bug,我反正是看不到自己的头像
-
andriod手机下载Expo Go后,如果你扫码之后,一直Loding,告诉你打不开,我建议是不要下载最新版本的Expo Go,这个问题就是我碰到过的,本来是我一直可以正常扫码运行,突然第二天不行了,怎么试都不行,然后我感觉Expo的界面跟昨天有点不一样,然后我就去谷歌商店看了下,坑爹!就在那天更新了一个版本,所以我觉得可能是新版本兼容性问题。所以如果你的安卓手机下载了Expo Go,扫码不能打开项目,建议下载v2.23.2版本的APK包。需要这个包的可以告诉我。
码字好累,明天再码。有问题可以评论区留言,大家一起踩坑。