前言
随着现代互联网的发展,越来越多的设备和平台的出现,对于企业而言需要为某一项业务维护多套代码,Android开发人员不熟悉Xcode的配置,iOS开发人员不熟悉Android Studio这是常见的情况。即使是宣称 Learn once,Write anywhere 的React Native 也是要求前端人员具有一定的原生开发知识。这显然对于企业而言,既增加了开发风险难度也增加了企业人力资源的成本。
一套代码多端运行,一直以来是各类开发框架的所致力的目标。在这几年里涌现出不少的优质轮子如:阿里的Weex,谷歌的Flutter,京东的Taro等等,但是至今仍然处于发展阶段,在和原生开发相比或多或少都存在着一些问题,包括本文所介绍的Expo也是如此,由于众所周知的原因,国内无法使用的Google service。如果使用替代方案如百度地图,Expo官方并没有给出相应的依赖包。而且Expo的开发环境只适用于Mac OS。所以在涉及到国内第三方平台SDK使用的App,以及使用Windows电脑作为开发机器的朋友,本文并不推荐使用Expo。
Expo是什么
在编写过React Native的朋友都知道,RN并不是一个纯粹的JS移动端编程框架,它依然需要借助于Xcode和Android Studio来做虚拟机以及相关的原生代码的编写和配置文件的修改。这对于很多从前端React 编程人员来说就存在着比较陡峭的学习曲线。而Expo就是针对这个问题在React Native基础之上所建立的一套工具+库+服务的全家桶。在这个全家桶中有可以在物理移动端上实时编译调试的开发客户端,也有封装好的原生SDK。对于JavaScript开发者来说,只需如web开发一样,通过简单地import就可以调用移动端的系统功能。Expo也自带应用托管功能,可以发送消息推送以及快速打包部署应用。它好处在于对于JavaScript开发者只需专注于功能的开发,而非将时间花费在各类原生环境的配置上,Expo这个壳为你准备好了一切。
面向对象
尽管Expo极大地降低了React Native的开发成本,但是并非是零基础学习。在学习之前,开发人员应该具备一定的React或相关前端框架的编程基础,以及大致浏览过React Native的官方文档。
安装
首先我们需要在Mac上安装Expo-cli:
npm install -g expo-cli
复制代码
然后在去App Store中下载Expo,如果是Android手机可以科学上网后在Google Play中下载或通过搜索引擎搜索Expo apk下载安装。
Android Expo UI界面
初始化启动Demo项目
expo init demo
cd demo
yarn start // or npm start
复制代码
启动后web端会自动弹出控制台页面:
Mac PC端的Expo UI界面
在使用Expo扫描二维码后,Expo开发工具就会编译渲染出初始空白页面
本文最终的App效果
由于本文作者业余时间撰写,本周会陆续更新:
- React Native样式编写
- React Navigation的使用
- 二维码/条形码的读写
- Webview渲染SVG以及与React Native的交互 有关web手机端适用