在前端的開發過程中，我們時常會使用一些第三方的組件庫。
1
這些組件庫給我們的開發提供了許多便利，但是也在一定程度上限制了開發與設計。爲了打破這些限制，同時使用組件化開發的思想來優化與規範開發與設計，從而使產品能夠在細節上更加優美，我們在8.0版本開發之初開發了一套通用化的組件庫 mcloud-mobile 。
組件庫涵蓋了我們開發過程中經常用到的Button，List，Modal等近二十種組件，提供了充足便利的屬性與方法，使用便捷，可以極大的減少代碼量。此外本組件庫還適配了 iOS 最新的黑夜模式。在開發的過程中，我們使用 ESLINT 規範代碼格式，使用 PR 形式提交代碼，保證代碼質量。開發完成後，我們決定發揚互聯網精神，將此倉庫開源至 npm 與 GitHub，配備了完整的說明文檔與運行實例，希望此倉庫不僅僅是用於我們自己的開發，也同時能夠幫助到更多的開發者。
集成方式
npm install mcloud-mobile
react-native link
API:https://troila-mobile.github.io/mCloud-Design-Mobile/docs/Button
2
背景
卓朗科技的打卡助手由 react-native 實現主業務開發，我們的產品即將面臨version 8.0的產品迭代，我們面臨的主要問題是view層的大改版和old code的歷史包袱，我們在曾經使用很多第三方的view library，But 這些都無法滿足我們的全部定製化需求，So 經過團隊內部的討論後，我們決定由我們 (troila-daka-mobile團隊) 來自己實現一套view library
需求
- 獨立的定製化風格（由我們的UED同事重新繪製的打卡助手8.0Design）
- 便於使用的拓展性（一些第三方組件對於屬性和樣式的拓展性不友好）
- 支持iOS13的Dark Mode（爲了更加友好的用戶體驗，打卡助手8.0支持了Dark Mode）
實現
在這樣的背景和需求之下，我們的mCloud-Design-Mobile誕生了。
我們的mCloud-Design-Mobile是開源的，分享給更多的開發者使用，也希望有更多的開發者和我們一起共同維護這個倉庫
Github: https://github.com/troila-mobile/mCloud-Design-Mobile
Npm: https://www.npmjs.com/package/mcloud-mobile
Website: https://troila-mobile.github.io/mCloud-Design-Mobile/
3
目前實現的組件
| 組件 | 描述 |
|---|---|
| Button | 按鈕 |
| Modal | 彈窗 |
| Marquee | 滾動文字 |
| SearchBar | 搜索欄 |
| Checkbox | 複選框 |
| Switch | 滑動開關 |
| SegmentedControl | 分段器 |
| NoticeBar | 提示信息 |
| Radio | 單選框 |
| InputItem | 單行文本輸入 |
| Textarea | 多行文本輸入 |
| List | 列表 |
| Badge | 徽標數 |
| Card | 卡片 |
| Label | 標籤 |
| Picker | 選擇器 |
| DatePicker | 日期選擇器 |
| EmptyView | 空顯示 |
| Tabs | 標籤頁 |
| ActionSheet | 動作面板 |
| Avatar | 頭像 |
| Stepper | 步進器 |
| ShareSheet | 分享 |
| ActivityIndicator | 活動指標 |
| CountDownView | 倒計時 |
| Steps | 分步顯示 |
文檔：
4
致謝
我們在開發的初期深入思考了對於整體樣式的統一性和外部樣式的可拓展性，同時我們也借鑑了一些第三方組件如@ant-design/react-native的一些開發思想，並且結合了我們的dark mode的需求，來實現整體的效果。
在組件搭建完成後，爲了方便開發者閱讀和使用，我們使用了docusaurus來搭建website，使用expo snack來在web端模擬展示組件樣式。
最後
我們在最初尋找了社區內支持dark mode的組件，可惜並沒有找到，所以我們自己開始造，我們曾經在社區內獲得了非常多的資源和支持，現在我們也開始貢獻給社區，儘管它可能還比較初期，一些功能還不完善，但我們會不斷的維護這個倉庫，幫助更多的開發者。