在前端的开发过程中，我们时常会使用一些第三方的组件库。
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的组件，可惜并没有找到，所以我们自己开始造，我们曾经在社区内获得了非常多的资源和支持，现在我们也开始贡献给社区，尽管它可能还比较初期，一些功能还不完善，但我们会不断的维护这个仓库，帮助更多的开发者。
网友评论