手机端html组件,轻量的移动端React组件库

移动端React组件库

重新设计了Form那块组件，让数据校验变得更简单。

欢迎提出更多优化建议，如有兴趣参与该项目，请邮件至：saytxk@gmail.com

(-> . ->) 没错，我就是来骗 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