expo 搭建 react-native 组件库【图文并茂】

这几天在研究如何快速搭建 RN 组件库，刚好公司组织分享，于是整理了一份 PPT，在这里和大家一起讨论下。

为啥还要开发组件库？

首先，我们先来讨论一个问题：为啥还要开发组件库？现在市面上各种各样的组件库多不胜数，为啥还要重复造轮子呢？

有两个方面的原因：

一方面，就组件库本身而言，它能提高开发效率，降低维护成本，代码复用等一些好处；一方面，就公司项目而言，我们使用第三方组件库是，使用率不高，难以二次修改，加上开发人员自己已经封装了十几个组件。

而且，能尝试开发一个组件库，对个人能力也是一种提升。但我觉得最重要的一个原因就是：设计规范必须要有代码落地。

产品经理有一套产品逻辑规范，交互设计师有一份产品交互规范，设计师有一份UI样式规范，等等。这些规范，直接或间接到开发人员这里，就只能是代码了。通过，组件库能更好的将这些规范定下来，而不是一千个哈姆雷特。因此，我们有必要有我们自己的组件库。

目录

先看下目录，这篇文章一共有四个部分，

• expo 简介
• 项目搭建
• 开发组件
• 发布组件

在开始介绍 expo 之前，我们先看下一般创建一个 RN 项目有那些步骤。

可以看到，会按照 开发平台 和 目标平台 分好几种情况，对于新手而言，通常这些配置没有半天时间是搞不下来的。而，expo 就简单很多，只需要全局装个 expo-cli 就可以了，不用配置那些繁琐的开发环境。

expo 简介

expo，按照官网的描述就是这样的：Expo 是通用 React 应用程序的框架和平台。它是一组围绕 react-native 和原生平台构建的功能，工具和服务，可以让你用同样的 JS/TS代码，在 iOS、 Android 和 web 应用程序上开发、构建、部署和快速迭代。

Expo is a framework and a platform for universal React applications. It is a set of tools and services built around React Native and native platforms that help you develop, build, deploy, and quickly iterate on iOS, Android, and web apps from the same JavaScript/TypeScript codebase.

expo 简介——功能

expo 可以让我们高效快速的开发 RN 项目，主要是它帮我们封装了好多跟设备相关的功能，我们只需要专注于开发 js 文件就可以了。它主要由以下四个功能：

第一，拥有丰富的 api，用于访问设备功能。如相册，通讯录，定位，相机功能，只需要引入 expo 相关的 api 就能实现。

第二，在线构建二进制文件。无需任何设备环境，只需要有证书资格，就可以构建二进制文件，进而部署应用。

第三，空中传送更新。这应该就是热更吧。如果不是修改 icon、name、sdkVersion等(publish-Limitations)就可以立即发布更新，不用构建。

第四，推送通知。只需要几行 js 代码就可以跨平台推送通知。当然，你也可以自行配置推送相关的设置。

expo 简介——工具

expo 提供了四种工具帮助我们更好的开发。

• client 手机端 app，用于预览项目
• expo-cli命令行工具，开发，构建，部署
• snack 沙盒工具，实时编辑，在线预览
• SDK 核心。版本号随 RN 版本号更新

expo 简介——服务

原则上讲，expo 是免费的，并且代码是开源的，不收费。

但是，会提供一些优先服务，29$/month。比如，在线构建服务是免费的，需要服务器。expo 会提供基本的构建服务，但是，如果高峰期使用人数多，会有个排队机制，等待时间就不确定了。如果，不想因为这样的原因而耽误一些事情的话，可以使用优先服务，优先构建你的项目。当然，他还有其他的服务项目，具体可以去官网查看。

Community	VS	Priority 29$/m
支持	在 expo-cli 中开发	支持
支持	在线构建	支持
不支持	优先构建	支持
不支持	团队	支持

项目搭建

ok，简单介绍完 expo，接下来 我们就要用 expo 来创建我们的项目了。

项目搭建——init

首先，全局安装 expo-cli 脚手架

npm install expo-cli --global

然后，初始化项目，会让我们选择模板，我们选择 blank 空白模板

expo init xxx

接着，启动项目

cd xxx
expo start

最后，预览项目

可以通过手机端，也就是 expo-client 扫码预览项目，也可以在终端输入 i 或 a 启动 ios 或者 android 模拟器预览（前提是你装了对应的模拟器）。

这个时候，其实就可以进行第三部分，开发组件了 可以跳过接下来的项目介绍

项目搭建——模板使用场景

在初始化项目的时候 expo init xxx 会有几个模板让我们选择，如何选择模板，可以看下表，根据你的实际需要选择。

如果，是用于项目演示，组件预览或者个人项目，选择 blank 模板；

如果，需要底部 tab 菜单，选择 tabs 模板；

如果，需要控制原生代码，选择 minimal 模板;

如果，预料到未知问题，请使用 RN 方式。

特征	托管工作流	裸流程	原生RN
只能使用 js/ts 开发	✔
使用 Expo 创建 iOS 和 安卓 版本	✔
使用Expo的无线更新功能	✔
使用expo的推送通知服务	✔
使用expo客户应用程序进行开发	✔	✔
访问expo SDK	✔	✔
添加自定义本机代码并管理本机依赖项		✔	✔
在Xcode和Android Studio中进行开发		✔	✔
无法访问Expo SDK			✔

项目搭建——publish

当我们，开发完项目后，需要让别人预览，先登录 expo 账号 expo login, 然后，再执行 expo publish 就可以发布我们的应用了。也可以在 expo 提供的 ui 界面中操作。发布完成后，会有个弹框，告诉我们预览链接。

项目搭建——build

如果需要生成安装包，执行 expo build:ios/andorid 需要配好相关证书权限。打包实际是在线上打包的，生成的二进制文件保存在线上。可以打开 expo 官网，登录账号 就能看到打包过程和结果。

项目搭建——upload

有了二进制文件后，我们就可以发布应用商店了 expo upload:ios。

当然，这只是非常简陋的流程，但是能大概知道 一个 expo 项目 从创建到发布商店的全程，这已经足够了。如果，真用到这些功能，还需要好好研究。

开发组件

项目创建好了，我们就可以开发组件了。

开发组件——添加开发目录

开发目录很简单，只需要在根目录下有个 components 文件夹即可，然后有个导出的文件即可。如下：

开发组件——组件源开关

在开发组件的过程中，需要实时预览组件的效果，那么组件在预览页面的引入方式可能是这样的：

// 预览页面可能位于 src/views/ButtonDemo.js
import { Button } from  '../components'

组件开发完，发布后，想要看线上组件的实际效果，引入可能会变成这样：

import { Button } from  'react-native-unit-zjp'

如果，你开发了有一些组件，有一些预览页面，那么，你在开发过程 和 发布后，为了预览组件，可能需要频繁修改组件路径。

其实，我们可以有一个统一修改组件引入路径的地方，解决这些问题。

在 src/component-path 下 添加 index.js 文件：

export * from '../components'; // 本地调试
// export * from '../../dist'; // 发布前测试包
// export * from '../../node_modules/you-name'; // npm 线上包

开发组件——添加发布目录

在根目录下添加 dist 文件夹，其中，dist 下的 components 文件夹 是从开发目录中直接拷贝过来的。目录下需要有一个 package.json 文件，管理我们要发布的组件。

到这里，我们就只需要慢慢完善我们的组件就可以了。

发布组件

当开发完组件后，就需要发布我们的组件到 npm 了。

首先，第一步，创建 npm 账号。上 npm 官网注册。

然后，第二步，初始化 npm 项目。就是我们刚刚创建的项目，要有个 package.json文件。

接着，第三步，登录我们的 npm 账号。npm adduser 或者 npm login。如果不知道登录没登录，可以执行 npm who am i查看。

最后，第四步，发布。进入 dist 目录，执行 npm publish。如果不是第一次发布了，先修改下 dist 目录下的 package.json，修改 version 字段，再执行npm publish。

这里是我演示 demo，有兴趣可以看下。
durian-ui
npm durian-ui

回顾

零零散散讲了一些东西，我们来回顾下；

首先，介绍了创建 RN 项目的一般方法，但是太过复杂，expo 就一句命令的事。

expo init xxx

然后，我们简单介绍了下 expo，从三个方面，

• 功能，类似小程序，轻松访问设备功能
• 工具，client，cli，snack，SDK
• 服务，免费，但提供优先服务，29$/m

接着，我们创建的一个 expo 项目，介绍了下 模板之间的区别，介绍了expo 的几个常用命令。

expo init xxx
...

cd xxx
expo start
...

expo publish

expo build:ios

expo upload:ios

最后，介绍了下发布 npm 包的四个步骤。并提供了一个示例项目。