輕量的移動端React組件庫

時間 2019-12-04

標籤輕量移動 react 組件欄目無線简体版

原文原文鏈接

移動端React組件庫

從新設計了Form那塊組件，讓數據校驗變得更簡單。
歡迎提出更多優化建議，若有興趣參與該項目，請郵件至：saytxk@gmail.comcss

(-> . ->) 沒錯，我就是來騙 Star 滴。html

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

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

使用說明

1.建立一個項目（走模版建立，無需任何配置，還沒有開源）

走模版建立的項目，無需下面配置操做，開箱即用。敬請期待...git

2.依賴安裝

npm i -S rcm-mobile  # 下載依賴

3.初始HTML

解決不一樣機型的多倍屏問題，經過設置視網膜顯示屏來達到統一的目的。github

組件尺寸大小都是基於 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>

自定義：多倍視網膜顯示屏web
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.全量使用（不推薦）

組件使用實例：npm

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

ReactDOM.render(<Button>Start</Button>, document.body);

5.按需加載（推薦）

方式一：使用 babel-plugin-import（推薦）瀏覽器

配置 babelbash

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

而後只需從 rcm-mobile 引入模塊便可，無需單獨引入樣式。babel

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。