移动端React组件库
重新设计了Form那块组件,让数据校验变得更简单。
欢迎提出更多优化建议,如有兴趣参与该项目,请邮件至:saytxk@
(-> . ->) 没错,我就是来骗 Star 滴。
使用说明
1.创建一个项目(走模版创建,无需任何配置,尚未开源)
走模版创建的项目,无需下面配置操作,开箱即用。敬请期待...
2.依赖安装
npm i -S rcm-mobile # 下载依赖
3.初始HTML
解决不同机型的多倍屏问题,通过设置视网膜显示屏来达到统一的目的。
组件尺寸大小都是基于 rem 开发,可以灵活调整以适用想要适配的视网膜显示屏
通用做法:一倍视网膜显示屏方案
name="viewport"
content="width=device-width,
initial-scale=1, maximum-scale=1,
minimum-scale=1, user-scalable=no"
/>
自定义:多倍视网膜显示屏
第一步:确定视网膜显示屏倍数,如现在设成 2倍
第二步:初始化rem的大小,html{font-size: 32px}。即浏览器默认的文字大小(16px) * 视网膜显示屏倍数
第三步:恢复body下的文字大小,body{font-size: 16px}
(function () {
var phoneScale = parseInt(window.screen.width) / 750
document.write('\')
})()
4.全量使用(不推荐)
组件使用实例:
import { Button } from 'rcm-mobile';
import 'rcm-mobile/dist/rcm-mobile.css';
ReactDOM.render(Start, document.body);
5.按需加载(推荐)
配置 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(Start, document.body);
方式二:手动引入需要的组件
import Button from 'rcm-mobile/lib/button'; // 加载 JS
import 'rcm-mobile/lib/button/style'; // 加载 CSS
如果觉得《手机端html组件 轻量的移动端React组件库》对你有帮助,请点赞、收藏,并留下你的观点哦!