轻量的移动端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 (推荐)

    1. 配置 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

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

查看所有标签

猜你喜欢:

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

解密SEO

解密SEO

欧朝晖 / 电子工业出版社 / 2007-05-01 / 49.80元

《解密SEO:搜索引擎优化与网站成功战略》帮助读者建立搜索营销的概念,分析搜索营销中的几种形式的手段,并从认识搜索引擎的原理开始,导出搜索引擎优化的具体解释,向读者引入以搜索引擎优化为宗旨的网站建设的新观念和设计理念。对网站结构优化、单页优化、链接优化等技术进行了详细的解说和示范。读者还可以接触到网站养育的新概念,帮助读者网站发展成熟,达到网络营销的目标。对搜索引擎优化中观念上和技术上常犯的错误,......一起来看看 《解密SEO》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

HEX HSV 转换工具
HEX HSV 转换工具

HEX HSV 互换工具