Expo快速开发移动端应用

前言

随着现代互联网的发展，越来越多的设备和平台的出现，对于企业而言需要为某一项业务维护多套代码，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效果

由于本文作者业余时间撰写，本周会陆续更新：

1. React Native样式编写
2. React Navigation的使用
3. 二维码/条形码的读写
4. Webview渲染SVG以及与React Native的交互 有关web手机端适用

转载于:https://juejin.im/post/5c7352e5e51d452b802362cd