Antd-mobile

来自ling
跳转至: 导航搜索

参考链接

http://www.css88.com/doc/typescript/doc/handbook/tutorials/React.html [antd-mobile-rn react-native demo|https://github.com/ant-design/antd-mobile-samples/tree/master/react-native]

https://mobile.ant.design/index-cn https://blog.csdn.net/u010377383/article/details/79014405 https://blog.csdn.net/u010377383/article/details/79455325

create-react-app创建一个项目

antd mobile 标准版本 使用参考https://gitee.com/ling2/shuishoupai-app/blob/master/README.md

create-react-app

  • 创建文件夹
  • cd到当前目录
  • cnpm install -g create-react-app yarn
  • create-react-app shuishoupai-app --scripts-version=react-scripts-ts
  • cd shuishoupai-app
  • cnpm start
  • cnpm install antd-mobile --save 或yarn antd-mobile
  • 引入 antd-mobile# 先参考 (html 或 模板) 相关设置,配置你的项目 html 页面。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="theme-color" content="#000000">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <script src="https://as.alipayobjects.com/g/component/fastclick/1.0.6/fastclick.js"></script>
    <script>
        if ('addEventListener' in document) {
            document.addEventListener('DOMContentLoaded', function() {
                FastClick.attach(document.body);
            }, false);
        }
        if(!window.Promise) {
            document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');
        }
    </script>
    <!--
      manifest.json provides metadata used when your web app is added to the
      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
    </noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>

react-app-rewired

  • 引入 react-app-rewired 并修改 package.json 里的启动配置:
cnpm install react-app-rewired --save-dev 或yarn add react-app-rewired --dev 

/* package.json */
"scripts": {
-   "start": "react-scripts start",
+   "start": "react-app-rewired start",
-   "build": "react-scripts build",
+   "build": "react-app-rewired build",
-   "test": "react-scripts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom",
}

/* package.json */
"scripts": {
-   "start": "react-scripts-ts start",
+   "start": "react-app-rewired start --scripts-version react-scripts-ts",
-   "build": "react-scripts-ts build",
+   "build": "react-app-rewired build --scripts-version react-scripts-ts",
-   "test": "react-scripts-ts test --env=jsdom",
+   "test": "react-app-rewired test --env=jsdom --scripts-version react-scripts-ts",
}
  • 然后在项目根目录创建一个 config-overrides.js 用于修改默认配置。
module.exports = function override(config, env) {
  // do stuff with the webpack config...
  return config;
};

  • 使用 babel-plugin-import, babel-plugin-import 是一个用于按需加载组件代码和样式的 babel 插件(原理),现在我们尝试安装它并修改 config-overrides.js 文件。
npm install babel-plugin-import --save-dev
+ const { injectBabelPlugin } = require('react-app-rewired');
  module.exports = function override(config, env) {
+   config = injectBabelPlugin(['import', { libraryName: 'antd-mobile', style: 'css' }], config);
    return config;
  };

  • ts-import-plugin 是一个用于按需加载组件代码和样式的 TypeScript 插件(原理),现在我们尝试安装它并修改 config-overrides.js 文件。
cnpm install ts-import-plugin --save-dev 或yarn add ts-import-plugin --dev 
  • 更改引用方式
- import Button from 'antd-mobile/lib/button';
+ import { Button } from 'antd-mobile';

antd-mobile-rn

cnpm install antd-mobile-rn --save
cnpm install babel-plugin-import --save-dev

Antd-mobile-rn.PNG

  • Modify the .babelrc config, then restart the service.
{
  "presets": ["babel-preset-expo"],
  "plugins": [["import", { "libraryName": "antd-mobile-rn" }]],
  "env": {
    ...
  }
}
  • Modify the App.js file, import Button component from antd-mobile-rn.
...
import { Button } from 'antd-mobile-rn';

...
render() {
  return (
    ...
    <Button>antd-mobile-rn button</Button>
    ...
  );
}

antd-mobile-rn

http://rn.mobile.ant.design/index-cn

整合react-native的增强版本,不再维护

ant-design-mobile-rn ant-design-mobile-rn-development demo app 代码地址:https://github.com/ant-design/ant-design-mobile-rn/tree/master/rn-kitchen-sink

  • 基于 Ant Design 移动设计规范。
  • 规则化的视觉样式配置,适应各类产品风格。
  • 基于 React Native 的多平台支持。
  • 使用 TypeScript 开发,提供类型定义文件。

React-Navigation V2 使用教程

expo

https://expo.io/learn

typescript

http://www.css88.com/doc/typescript/doc/handbook/tutorials/React.html

package 升级

npm install -g npm-check
#npm-check