刘贵学博客

Ant Design Mobile 渐进系列教程 2:组件

1. 目标

整个系列,我们会完成一个 TODO 的可用程序, 本文主要针对 ADM的 tab 组件。

2. 原型图

页面的组件的组成方式如下:。

注: 蓝色分支为ADM已有控件。

3. 实现

3.1 NavBar 组件

NavBar 本身在 ADM中已经存在了, 直接引入即可,如下:

import { NavBar } from 'antd-mobile';
export default React.createClass({
  render() {
    return (
      <div>
          <NavBar mode="light" iconName="">
            任务列表
          </NavBar>

          //....
      </div> 
    );
  },
});

效果如下:

3.2 ContentBox 组件

  • components/ContentBox.js 的代码如下:
import React from 'react';

import  '../style/ContextBox.less';

export default React.createClass({

  render() {

    return (
      <div className="contextBox">

      {this.props.children}

      </div>
    );
  },
});

  • 其中 style/ContentBox.less 的代码如下:

@tabHeight:120px;

.contextBox{
  width: 100%;
  height: 60%;
  margin-bottom: @tabHeight; 
  background-color:#eee;
  position: absolute;
  overflow: scroll;
}

3.3 TabListBar 组件

  • components/TabListBar 组件 源码 如下:

import React from 'react';


import { TabBar } from 'antd-mobile';
import  {Menu} from '../data/Menu';

export default React.createClass({
  getInitialState() {
    return {
      selectedTab: 'todo',
    };
  },

  renderContent() {
      return (
        <div>{this.props.children}</div>
      );
  },

  renderMenu() {
      let menus = [];
      let i =0;

      for(i=0;i<3; i++)
      {
        let m = Menu[i];
        menus.push(
        <TabBar.Item
          icon={{ uri: 'https://zos.alipayobjects.com/rmsportal/'+m.icon+'.png' }}
          selectedIcon={{ uri: 'https://zos.alipayobjects.com/rmsportal/'+m.selected+'.png' }}
          title={m.title}
          key={m.url}
          selected={this.state.selectedTab===m.url}
          onPress={() => {
            this.setState({
              selectedTab: m.url,
            });
          }}
        >
          {this.renderContent()}
        </TabBar.Item>
        );

      }
      return menus;
  },


  render() {

    let menus = this.renderMenu();

    return (
      <TabBar
        unselectedTintColor="#949494"
        tintColor="#33A3F4"
        barTintColor="white"
      >


      {menus}
        
       
      </TabBar>
    );
  },
});

  • data/Menu 数据源码 如下:
import React from 'react'
const Menu =[
    {
      title:"代办事", 
      url: "todo",
      icon:"UNQhIatjpNZHjVf",
      selected:"HLkBvJOKnmOfBPO",
    },
    
    {
      title:"清单", 
      url: "list",
      icon:"YWpPVCVOnJoCYhs",
      selected:"WadBBxOIZtDzsgP",
    },
  
    {
      title:"我的", 
      url: "mine",
      icon:"EljxLrJEShWZObW",
      selected:"LWNaMdwAFSmYBFw",
    }
  
  ];

export {Menu};

3.4 pages/Main 页面

  • pages/Main.js 的源码如下:
import React from 'react';


import { NavBar } from 'antd-mobile';

import ContextBox from '../components/ContextBox';
import TabListBar from '../components/TabListBar';

export default React.createClass({
  render() {
    return (
      <div>
          <NavBar mode="dark" iconName="">
            任务列表
          </NavBar>

          <TabListBar>

            <ContextBox>
              <p>任务内容</p>
              <p>....</p>
            </ContextBox>

          </TabListBar>

      </div> 
    );
  },
});

4. 运行结果

至此, 我们app的页面框架已经实现基本实现了,但是有个问题,点击下面的Tab时, ContextBox里的内容无法变化,下一章节我们会引入 Route 来解决这个问题。

本文所有代码可以下载:

git clone git@git.coding.net:guixue/antdm-demo.git
cd antdm-demo
git checkout demo2

为了长期交流,antdm-demo 仓库被为私有,注册 coding.net 后, 加 guixue 为好友后,会添加进来。