轻量的移动端React组件库

AaronYuan 发布于2019-08-23 18:08 / 1244人阅读

摘要：移动端组件库重新设计了那块组件，让数据校验变得更简单。敬请期待依赖安装下载依赖初始解决不同机型的多倍屏问题，通过设置视网膜显示屏来达到统一的目的。方式二手动引入需要的组件加载加载

移动端React组件库

重新设计了Form那块组件，让数据校验变得更简单。
欢迎提出更多优化建议，如有兴趣参与该项目，请邮件至：saytxk@gmail.com

(-> . ->) 没错，我就是来骗 Star 滴。

项目地址: https://github.com/rc-mobile/rcm-mobile 演示页面: https://rc-mobile.github.io/rcm-mobile/ 使用说明 1.创建一个项目（走模版创建，无需任何配置，尚未开源）

走模版创建的项目，无需下面配置操作，开箱即用。敬请期待...

2.依赖安装

npm i -S rcm-mobile  # 下载依赖

3.初始HTML

解决不同机型的多倍屏问题，通过设置视网膜显示屏来达到统一的目的。

组件尺寸大小都是基于 rem 开发，可以灵活调整以适用想要适配的视网膜显示屏

通用做法：一倍视网膜显示屏方案

自定义：多倍视网膜显示屏

第一步：确定视网膜显示屏倍数，如现在设成 2倍

第二步：初始化rem的大小，html{font-size: 32px}。即浏览器默认的文字大小(16px) * 视网膜显示屏倍数

第三步：恢复body下的文字大小，body{font-size: 16px}

4.全量使用（不推荐）

组件使用实例：

import { Button } from "rcm-mobile";
import "rcm-mobile/dist/rcm-mobile.css";

ReactDOM.render(, document.body);

5.按需加载（推荐）

方式一：使用 babel-plugin-import（推荐）

配置 babel

// .babelrc or babel-loader option
{
  "plugins": [
    ["import", {
      "libraryName": "rcm-mobile",
      "libraryDirectory": "lib",
      "style": true
    }, "rcm-mobile"]
  ]
}

然后只需从 rcm-mobile 引入模块即可，无需多带带引入样式。

import { Button } from "rcm-mobile";

ReactDOM.render(, document.body);

方式二：手动引入需要的组件

import Button from "rcm-mobile/lib/button";  // 加载 JS
import "rcm-mobile/lib/button/style";  // 加载 CSS

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104732.html

UI大全：前端UI框架集合（持续更新，当前32个）

摘要：简洁直观强悍的前端开发框架，让开发更迅速简单。是一套基于的前端框架。首个版本发布于年金秋，她区别于那些基于底层的框架，却并非逆道而行，而是信奉返璞归真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

only_do 2019-08-22 10:47 评论0 收藏0
UI大全：前端UI框架集合（持续更新，当前32个）

摘要：简洁直观强悍的前端开发框架，让开发更迅速简单。是一套基于的前端框架。首个版本发布于年金秋，她区别于那些基于底层的框架，却并非逆道而行，而是信奉返璞归真之道。 2017-1209 ZanUI (Vue) 2017-1218 Onsen UI(Vue, React, Angular) 2017-1215 增加 Vuetify, Weex UI, Semantic UI React,ele...

church 2019-08-01 16:03 评论0 收藏0
GitHub 值得收藏的前端项目[每月更新...]

摘要：也是一款优秀的响应式框架站点所使用的一套框架为微信服务量身设计的一套框架一组很小的，响应式的组件，你可以在网页的项目上到处使用一个可定制的文件，使浏览器呈现的所有元素，更一致和符合现代标准。 GitHub 值得收藏的前端项目整理与收集的一些比较优秀github项目，方便自己阅读，顺便分享出来，大家一起学习，本篇文章会持续更新，版权归原作者所有。欢迎github star与fork 预...

maxmin 2019-08-29 16:07 评论0 收藏0