這幾天在研究如何快速搭建 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 包的四個步驟。並提供了一個示例專案。
