轻量的移动端React组件库

栏目: 服务器 · 发布时间: 5年前

内容简介：重新设计了Form那块组件，让数据校验变得更简单。欢迎提出更多优化建议，如有兴趣参与该项目，请邮件至：saytxk@gmail.com走模版创建的项目，无需下面配置操作，开箱即用。敬请期待...

移动端React组件库

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

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

项目地址: https://github.com/rc-mobile/rcm-mobile

演示页面: https://rc-mobile.github.io/rcm-mobile/

使用说明

1.创建一个项目（走模版创建，无需任何配置，尚未开源）

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

2.依赖安装

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

3.初始HTML

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

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

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

<!DOCTYPE html>
<html lang="cn">
  <head>
    <meta charset="utf-8">
    <meta
      name="viewport"
      content="width=device-width,
      initial-scale=1, maximum-scale=1,
      minimum-scale=1, user-scalable=no"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
  </head>
  <body></body>
</html>

自定义：多倍视网膜显示屏
1. 第一步：确定视网膜显示屏倍数，如现在设成 2倍
2. 第二步：初始化rem的大小，html{font-size: 32px}。即浏览器默认的文字大小(16px) * 视网膜显示屏倍数
3. 第三步：恢复body下的文字大小，body{font-size: 16px}

<!DOCTYPE html>
<html lang="cn" style="font-size: 32px;">
  <head>
    <meta charset="utf-8">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <script>
     (function () {
        var phoneScale = parseInt(window.screen.width) / 750
        document.write('\<meta name="viewport" content="width=750, minimum-scale=' + phoneScale +
          ', maximum-scale=' + phoneScale + ', user-scalable=no, viewport-fit=cover">')
      })()
    </script>
  </head>
  <body style="font-size: 16px;"></body>
</html>

4.全量使用（不推荐）

组件使用实例：

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

ReactDOM.render(<Button>Start</Button>, 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(<Button>Start</Button>, document.body);

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

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

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。

码农书籍

刷新

[美] 萨提亚·纳德拉 / 陈召强、杨洋 / 中信出版集团 / 2018-1 / 58

《刷新：重新发现商业与未来》是微软CEO萨提亚•纳德拉首部作品。互联网时代的霸主微软，曾经错失了一系列的创新机会。但是在智能时代，这家科技公司上演了一次出人意料的“大象跳舞”。2017年，微软的市值已经超过6000亿美元，在科技公司中仅次于苹果和谷歌，高于亚马逊和脸谱网。除了传统上微软一直占有竞争优势的软件领域，在云计算、人工智能等领域，微软也获得强大的竞争力。通过收购领英，微软还进入社交......一起来看看《刷新》这本书的介绍吧!

码农工具