在前端的開發(fā)過程中，我們時常會使用一些第三方的組件庫。

1

這些組件庫給我們的開發(fā)提供了許多便利，但是也在一定程度上限制了開發(fā)與設(shè)計。為了打破這些限制，同時使用組件化開發(fā)的思想來優(yōu)化與規(guī)范開發(fā)與設(shè)計，從而使產(chǎn)品能夠在細(xì)節(jié)上更加優(yōu)美，我們在8.0版本開發(fā)之初開發(fā)了一套通用化的組件庫 mcloud-mobile 。

組件庫涵蓋了我們開發(fā)過程中經(jīng)常用到的Button，List，Modal等近二十種組件，提供了充足便利的屬性與方法，使用便捷，可以極大的減少代碼量。此外本組件庫還適配了 iOS 最新的黑夜模式。在開發(fā)的過程中，我們使用 ESLINT 規(guī)范代碼格式，使用 PR 形式提交代碼，保證代碼質(zhì)量。開發(fā)完成后，我們決定發(fā)揚互聯(lián)網(wǎng)精神，將此倉庫開源至 npm 與 GitHub，配備了完整的說明文檔與運行實例，希望此倉庫不僅僅是用于我們自己的開發(fā)，也同時能夠幫助到更多的開發(fā)者。

集成方式

npm install mcloud-mobile

react-native link

API:https://troila-mobile.github.io/mCloud-Design-Mobile/docs/Button

2

背景

卓朗科技的打卡助手由 react-native 實現(xiàn)主業(yè)務(wù)開發(fā)，我們的產(chǎn)品即將面臨version 8.0的產(chǎn)品迭代，我們面臨的主要問題是view層的大改版和old code的歷史包袱，我們在曾經(jīng)使用很多第三方的view library，But 這些都無法滿足我們的全部定制化需求，So 經(jīng)過團隊內(nèi)部的討論后，我們決定由我們 (troila-daka-mobile團隊) 來自己實現(xiàn)一套view library

需求

• 獨立的定制化風(fēng)格（由我們的UED同事重新繪制的打卡助手8.0Design）
• 便于使用的拓展性（一些第三方組件對于屬性和樣式的拓展性不友好）
• 支持iOS13的Dark Mode（為了更加友好的用戶體驗，打卡助手8.0支持了Dark Mode）

實現(xiàn)

在這樣的背景和需求之下，我們的mCloud-Design-Mobile誕生了。

我們的mCloud-Design-Mobile是開源的，分享給更多的開發(fā)者使用，也希望有更多的開發(fā)者和我們一起共同維護(hù)這個倉庫

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

目前實現(xiàn)的組件

文檔：

4

致謝

我們在開發(fā)的初期深入思考了對于整體樣式的統(tǒng)一性和外部樣式的可拓展性，同時我們也借鑒了一些第三方組件如@ant-design/react-native的一些開發(fā)思想，并且結(jié)合了我們的dark mode的需求，來實現(xiàn)整體的效果。

在組件搭建完成后，為了方便開發(fā)者閱讀和使用，我們使用了docusaurus來搭建website，使用expo snack來在web端模擬展示組件樣式。

最后

我們在最初尋找了社區(qū)內(nèi)支持dark mode的組件，可惜并沒有找到，所以我們自己開始造，我們曾經(jīng)在社區(qū)內(nèi)獲得了非常多的資源和支持，現(xiàn)在我們也開始貢獻(xiàn)給社區(qū)，盡管它可能還比較初期，一些功能還不完善，但我們會不斷的維護(hù)這個倉庫，幫助更多的開發(fā)者。