Lightweight Mobile React Component Library

React Component Library at Mobile End

The Form component was redesigned to make data verification easier.
Welcome to put forward more optimization suggestions. If you are interested in participating in this project, please email to: saytxk@gmail.com

(->.->) yes, I’m here to cheatStarDrops.

Project address:https://github.com/rc-mobile/rcm-mobile

Presentation page:https://rc-mobile.github.io/rcm-mobile/

direction for use

1. Create a project (template creation, no configuration required, no open source yet)

Projects created by templates need not be configured as follows, and can be used out of the box. Please look forward to it …

2. Rely on installation

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

3. initial HTML

To solve the problem of multiple screens of different models, the retinal display screen is set to achieve the goal of unity.

The size of components is based on rem development and can be flexibly adjusted to suit the retina display screen that you want to adapt.

  • General Practice: Double Retinal Display Scheme
<!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>
  • Custom: Multiple Retinal Display

    1. Step 1: Determine the multiple of retina display screen, for example, set it to 2 times now
    2. Step 2: Initialize rem size, html{font-size: 32px}. That is, the default text size of the browser (16px) * multiple of retina display screen
    3. Step 3: restore the text size under 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. Full Use (Not recommended)

Component usage instance:

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

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

5. Load on Demand (Recommend)

  • Mode 1: Usebabel-plugin-import(recommended)

    1. Configurationbabel

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

And then you just have to go fromrcm-mobileIt is only necessary to introduce modules without introducing styles separately.

import { Button } from 'rcm-mobile';

ReactDOM.render(<Button>Start</Button>, document.body);
  • Mode 2: Manually introduce the required components
import Button from 'rcm-mobile/lib/button';  // 加载 JS
import 'rcm-mobile/lib/button/style';  // 加载 CSS