Day34 | WebView元件开发 - 使用Ant Design Mobile UI Library

哈罗大家好，今天我们又重启了extension的开发，话说最近真忙啊，不过就算再忙专案也会进行下去开发完成的。

配置UI Library相关环境

今天开始，我们会在使用react的webview里引用Ant Design Mobile来进行Webview的元件开发。

为什麽要特别使用mobile的ui元件呢？在我们的Extension的使用情境里，我们会在使用者的editor group里多开一个editor，这个editor最多只会占用使用者一半的视窗，宽度相较一般网页也会至少缩减一半。在这种宽高比例下，处理Router导航的元件选用mobile的ui元件会比某些desktop的元件来得适合。在另外一种情境，如表单处理，我们则是会继续使用Desktop的UI元件。

让我们开始配置UI元件吧！

首先，进入我们webivew专案的资料夹下面

cd webview

接着，安装antd-mobile的library

yarn add antd-mobile

好的，引入library之後，我们一般可以直接在app.css直接引用整个library的css档案，如下所示。

@import '~antd-mobile/dist/antd-mobile.css'; 

不过这样会一次引入所有的css设定，而我们使用的元件并不多。实务上，我们会根据使用多少ui元件按需引入css的设定。为了这个需求，我们会使用到babel-plugin-import这个套件，帮助我们根据引入的library的元件来决定引用多少元件的css设定。

为了使用babel-plugin-import这个工具，我们会使用到create-react-app预设以外的客制化设定。

因为要使用create-react-app预设以外的webpack或babel设定，我们会使用react-app-rewired这个工具，目的是覆盖掉create-react-app原本使用的webpack或babel的设定档，以使用预设以外的客制化设定。因为react-app-rewired这个套件在2.x版的一些issue，这里我们会再安装customize-cra这个工具配合rewired一起使用。

yarn add -D react-app-rewired customize-cra babel-plugin-import

安装完後，我们需要在根目录下创建一个config-override.js档案，并在配置使用客制化的设定。

const { override, fixBabelImports } = require('customize-cra');

module.exports = override(
 fixBabelImports('import', {
  libraryName: 'antd-mobile',
  style: 'css',
 }),
);

接着，我们将package.json里Create-React-App预设使用的react-scripts改为react-app-rewired。

{
...
    "scripts": {
        "start": "react-app-rewired start",
        "build": "react-app-rewired build && cp -r ./build ../out && rm -rf ./build",
        "test": "react-app-rewired test",
        ...
    }
...
}

本来package.json里的scripts会有一个以eject为名的script，但使用eject这个script後，我们没办法随着升级create react app更新eject出来的设定档。react-app-rewired就是为了解决eject这个预设提供的script的不足所开发的套件，因此，这里我们直接删除eject的script即可。

现在每次我们使用npm script，如yarn build时，就会自动套用到babel-plugin-import里的设定，引用所需的css。

在Webview里的react使用Ant Design Mobile元件

好的，环境已经设定好了，让我们马上来使用Ant Design Mobile的元件来取代前面介绍router时使用的Navigator的连结吧！

目前我们的Webview页面功能相对单纯，我们会使用SegmentedControl来处理router的换页。

让我们在src/component资料夹下面创造一个navigator的资料夹，并在资料夹下创建两个文件

.
├── index.ts
└── navigator.tsx

首先是最重要的navigator.tsx，我们会引用SegmentedControl这个元件，并使用react router的useHistory hook，在切换页签时，导航应用程序到对应的页面。

import * as React from 'react';
import { SegmentedControl } from 'antd-mobile';
import { useHistory } from 'react-router-dom';

export default function SegmentedNavigator() {

 const history = useHistory();

 const onValueChange = (value: string) => {
  history.push(`/${value.toLowerCase()}`);
 }

 return (
   <SegmentedControl
    values={['Snippets', 'Extensions']}
    selectedIndex={0}
    onValueChange={onValueChange}
   />
 );
}

接着，我们在index.ts汇出这个component

import SegmentedControl from './navigator';

export default SegmentedControl;

好的，完成Navigator之後，现在我们就可以在Router页面使用这个元件了，但首先让我们引用WingBlank这个元件，让我们将背景色置换成对视觉友善的灰色。

import React from 'react';
import {
  useHistory,
  HashRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import { WingBlank } from 'antd-mobile';

export default function RouterPage() {
  return (
    <Router>
      <WingBlank size="lg" className="wing-blank">
        <div>
          ...
        </div>
      </WingBlank>
    </Router>
  );
}

接下来，我们在router的目录下创建router.css设定Wingblank的padding间距

.wing-blank {
 padding: 1em 0;
}

现在我们引用router.css，并引使用刚才完成的Navigator元件在router上面。

import { WingBlank } from 'antd-mobile';
import React from 'react';
import {
  useHistory,
  HashRouter as Router,
  Switch,
  Route,
  Link
} from "react-router-dom";
import SegmentedNavigator from '../components/navigator';
import './router.css';

export default function RouterPage() {
  return (
    <Router>
      <WingBlank size="lg" className="wing-blank">
        <div>
          <nav>
              <SegmentedNavigator />
          </nav>
          <Switch>
            <Route path="/snippets">
              <Snippets />
            </Route>
            <Route path="/extensions">
              <Extensions />
            </Route>
            <Route path="/">
              <Snippets />
            </Route>
          </Switch>
        </div>
      </WingBlank>
    </Router>
  );
}

好了，完成以後，让我们检视在网页上呈现的结果吧！

现在我们可以看到mobile style的tab，让我们检视下切换标签後的结果。

好的，以上就是今天分享的内容，环境设定与实际元件的实际使用。

明天我们会继续开发Webview里的Snippet管理元件，我们明天见，谢谢大家。

IT邦帮忙的Markdown语法目前并没有支援jsx跟tsx的语法，上面是先使用js的markdown格式来展示。可能有些地方的语法hightlight不太自然，後续系列完成後会将前面系列文一并调整。

参考资源

• Ant Design Mobile

• Ant Design