Ant Design Mobile of React 移动应用开发：UI框架39个组件集中讲解和示例-灵析社区

前言

Ant Design Mobile of React是一个基于React的UI框架，它提供了39个组件，可用于构建移动端的React应用。Ant Design Mobile of React提供了丰富的移动端UI组件，例如按钮、表单、导航、模态框等，这些能够帮助开发者快速构建功能丰富、美观的移动应用。Ant Design Mobile of React还包括一些高级组件，如日期选择器、轮播图等，以满足更多复杂的移动应用需求。这使得Ant Design Mobile of React成为一个非常全面的移动端UI框架，适用于各种类型的移动应用开发项目。

一、Ant Design Mobile of React 全部组件集中演示页面示例代码

import { Button, WhiteSpace, WingBlank, Accordion, Badge, Carousel, Checkbox, DatePicker, Drawer, Flex, Grid, Icon, ImagePicker, InputItem, List, Modal, NavBar, NoticeBar, Pagination, Picker, Popover, Progress, PullToRefresh, Radio, Range, Result, SearchBar, SegmentedControl, Slider, Stepper, Steps, SwipeAction, Switch, TabBar, Tag, TextareaItem, Toast, View, ActivityIndicator } from 'antd-mobile';

const ExampleComponent = () => {
  return (
    <div>
      <Button type="primary">按钮</Button>
      <WhiteSpace />
      <WingBlank>
        <Accordion defaultActiveKey="0">
          <Accordion.Panel header="折叠项1">
            <List>
              <List.Item>折叠项1的内容</List.Item>
            </List>
          </Accordion.Panel>
          <Accordion.Panel header="折叠项2">
            <List>
              <List.Item>折叠项2的内容</List.Item>
            </List>
          </Accordion.Panel>
        </Accordion>
      </WingBlank>
      <WhiteSpace />
      <Badge text="标记" />
      <WhiteSpace />
      <Carousel>
        <img src="carousel1.jpg" alt="轮播图1" />
        <img src="carousel2.jpg" alt="轮播图2" />
      </Carousel>
      <WhiteSpace />
      <Checkbox.CheckboxItem>复选框</Checkbox.CheckboxItem>
      <WhiteSpace />
      <DatePicker mode="date">日期选择器</DatePicker>
      <WhiteSpace />
      <Drawer sidebar={<div>侧边栏内容</div>} open={true}>抽屉</Drawer>
      <WhiteSpace />
      <Flex>
        <Flex.Item>弹性盒子1</Flex.Item>
        <Flex.Item>弹性盒子2</Flex.Item>
      </Flex>
      <WhiteSpace />
      <Grid data={[{ text: '选项1' }, { text: '选项2' }]} columnNum={2} />
      <WhiteSpace />
      <Icon type="check-circle" /> 图标
      <WhiteSpace />
      <ImagePicker />
      <WhiteSpace />
      <InputItem placeholder="请输入" />
      <WhiteSpace />
      <List>
        <List.Item>列表项1</List.Item>
        <List.Item>列表项2</List.Item>
      </List>
      <WhiteSpace />
      <Modal visible={true} transparent>模态框</Modal>
      <WhiteSpace />
      <NavBar>导航栏</NavBar>
      <WhiteSpace />
      <NoticeBar>通知栏</NoticeBar>
      <WhiteSpace />
      <Pagination total={5} current={1} />
      <WhiteSpace />
      <Picker data={[{ value: '1', label: '选项1' }, { value: '2', label: '选项2' }]} cols={1}>选择器</Picker>
      <WhiteSpace />
      <Popover visible={true} overlay={[{ text: '选项1' }, { text: '选项2' }]} align={{ overflow: { adjustY: 0, adjustX: 0 }, offset: [-10, 0] }}>
        <Button>弹出框</Button>
      </Popover>
      <WhiteSpace />
      <Progress percent={50} />
      <WhiteSpace />
      <PullToRefresh refreshing={true} onRefresh={() => {}}>
        <div>下拉刷新</div>
      </PullToRefresh>
      <WhiteSpace />
      <Radio.RadioItem>单选框</Radio.RadioItem>
      <WhiteSpace />
      <Range min={0} max={100} />
      <WhiteSpace />
      <Result title="结果页面" message="操作成功" />
      <WhiteSpace />
      <SearchBar placeholder="搜索" />
      <WhiteSpace />
      <SegmentedControl values={['选项1', '选项2']} />
      <WhiteSpace />
      <Slider />
      <WhiteSpace />
      <Stepper />
      <WhiteSpace />
      <Steps current={1} direction="horizontal">
        <Steps.Step title="步骤1" />
        <Steps.Step title="步骤2" />
      </Steps>
      <WhiteSpace />
      <SwipeAction autoClose right={[{ text: '删除', onPress: () => {} }]}>
        <div>滑动操作</div>
      </SwipeAction>
      <WhiteSpace />
      <Switch checked /> 开关
      <WhiteSpace />
      <TabBar>
        <TabBar.Item title="选项1">选项1内容</TabBar.Item>
        <TabBar.Item title="选项2">选项2内容</TabBar.Item>
      </TabBar>
      <WhiteSpace />
      <Tag>标签</Tag>
      <WhiteSpace />
      <TextareaItem placeholder="请输入" />
      <WhiteSpace />
      <Toast>提示信息</Toast>
      <WhiteSpace />
      <View>视图容器</View>
      <WhiteSpace />
      <ActivityIndicator animating={true} />
    </div>
  );
};

在上面的示例中，我们导入了AMR中的所有组件，并在ExampleComponent中使用了每个组件来展示其功能和样式。你可以根据实际需求对每个组件进行修改和定制。

希望这个示例能够帮助你快速了解AMR中的全部组件，并应用到你的项目中。

二、Ant Design Mobile of React 全部组件逐个简要解读

Button（按钮）：用于创建交互按钮，提供不同类型和样式的按钮。
WhiteSpace（空白间距）：用于在组件之间添加空白间距，调整布局。
WingBlank（两翼留白）：用于在组件周围添加左右留白，调整布局。
Accordion（折叠面板）：提供折叠面板组件，可以展开和折叠内容。
Badge（徽标数）：显示带有数字或文本的小徽标。
Carousel（走马灯）：用于创建轮播图效果，显示多张图片滑动播放。
Checkbox（复选框）：提供复选框组件，用于多项选择。
DatePicker（日期选择器）：用于选择日期。
Drawer（抽屉）：提供侧边栏抽屉组件，用于隐藏和显示侧边栏内容。
Flex（弹性盒子）：提供弹性盒子布局组件，用于灵活布局子组件。
Grid（宫格）：提供宫格布局组件，用于展示图标或文本的网格布局。
Icon（图标）：提供常用图标的展示，支持自定义图标。
ImagePicker（图片选择器）：用于选择和展示图片。
InputItem（输入框）：提供输入框组件，用于接收用户的输入。
List（列表）：提供列表组件，用于展示数据列表。
Modal（模态框）：提供模态框组件，用于显示弹出层内容。
NavBar（导航栏）：提供导航栏组件，用于展示页面标题和导航按钮。
NoticeBar（通知栏）：提供通知栏组件，用于显示重要的通知信息。
Pagination（分页器）：提供分页器组件，用于分页显示内容。
Picker（选择器）：提供选择器组件，用于选择单个或多个选项。
Popover（气泡卡片）：提供气泡卡片组件，用于显示弹出框内容。
Progress（进度条）：提供进度条组件，用于展示任务进度或比例。
PullToRefresh（下拉刷新）：提供下拉刷新组件，用于触发刷新操作。
Radio（单选框）：提供单选框组件，用于单项选择。
Range（范围选择器）：提供范围选择器组件，用于选择范围值。
Result（结果页面）：提供结果页面组件，用于显示操作结果。
SearchBar（搜索栏）：提供搜索栏组件，用于进行搜索操作。
SegmentedControl（分段器）：提供分段器组件，用于切换选项。
Slider（滑动输入条）：提供滑动输入条组件，用于选择数值范围。
Stepper（步进器）：提供步进器组件，用于增加或减少数值。
Steps（步骤条）：提供步骤条组件，用于展示多步骤的流程。
SwipeAction（滑动操作）：提供滑动操作组件，用于在列表项上触发操作。
Switch（开关）：提供开关组件，用于切换状态。
TabBar（标签栏）：提供标签栏组件，用于切换不同页面或功能模块。
Tag（标签）：用于展示标签样式的文字或标记。
TextareaItem（文本框）：提供文本框组件，用于多行文本输入。
Toast（提示框）：提供提示框组件，用于显示临时性的提示信息。
View（视图容器）：用于包裹其他组件，创建页面布局。
ActivityIndicator（活动指示器）：提供活动指示器组件，用于显示加载状态。

以上是对AMR中全部主要组件的简要解读。每个组件都具有特定的功能和样式，可以根据实际需求选择合适的组件来构建应用界面。

三、每个组件用法示例和事件处理示例

Button（按钮）：

import { Button } from 'antd-mobile';

const ExampleComponent = () => {
  const handleClick = () => {
    console.log('按钮被点击了');
  };

  return (
    <Button type="primary" onClick={handleClick}>
      点击按钮
    </Button>
  );
};

2. Accordion（折叠面板）：

import { Accordion, List } from 'antd-mobile';

const ExampleComponent = () => {
  const handleAccordionChange = (key) => {
    console.log('当前展开的折叠项：', key);
  };

  return (
    <Accordion onChange={handleAccordionChange}>
      <Accordion.Panel header="折叠项1">
        <List>
          <List.Item>折叠项1的内容</List.Item>
        </List>
      </Accordion.Panel>
      <Accordion.Panel header="折叠项2">
        <List>
          <List.Item>折叠项2的内容</List.Item>
        </List>
      </Accordion.Panel>
    </Accordion>
  );
};

3. Checkbox（复选框）：

import { Checkbox } from 'antd-mobile';

const ExampleComponent = () => {
  const handleCheckboxChange = (e) => {
    console.log('复选框状态改变：', e.target.checked);
  };

  return (
    <Checkbox.CheckboxItem onChange={handleCheckboxChange}>
      复选框
    </Checkbox.CheckboxItem>
  );
};

4. DatePicker（日期选择器）：

import { DatePicker } from 'antd-mobile';

const ExampleComponent = () => {
  const handleDateChange = (date) => {
    console.log('选择的日期：', date);
  };

  return (
    <DatePicker mode="date" onChange={handleDateChange}>
      选择日期
    </DatePicker>
  );
};

5. Drawer（抽屉）：

import { Drawer, Button } from 'antd-mobile';

const ExampleComponent = () => {
  const handleOpenDrawer = () => {
    console.log('打开抽屉');
  };

  const handleCloseDrawer = () => {
    console.log('关闭抽屉');
  };

  return (
    <div>
      <Button onClick={handleOpenDrawer}>打开抽屉</Button>
      <Drawer sidebar={<div>侧边栏内容</div>} open={true} onOpenChange={handleCloseDrawer}>
        主内容区域
      </Drawer>
    </div>
  );
};

6. Grid（宫格）：

import { Grid } from 'antd-mobile';

const ExampleComponent = () => {
  const handleGridClick = (item) => {
    console.log('点击的宫格项：', item);
  };

  const gridData = [
    { text: '选项1' },
    { text: '选项2' },
    { text: '选项3' },
  ];

  return <Grid data={gridData} columnNum={2} onClick={handleGridClick} />;
};

7. Icon（图标）：

import { Icon } from 'antd-mobile';

const ExampleComponent = () => {
  const handleIconClick = () => {
    console.log('图标被点击了');
  };

  return <Icon type="check-circle" onClick={handleIconClick} />;
};

8. InputItem（输入框）：

import { InputItem } from 'antd-mobile';

const ExampleComponent = () => {
  const handleInputChange = (value) => {
    console.log('输入框的值：', value);
  };

  return <InputItem placeholder="请输入" onChange={handleInputChange} />;
};

9. List（列表）：

import { List } from 'antd-mobile';

const ExampleComponent = () => {
  const handleListItemClick = () => {
    console.log('列表项被点击了');
  };

  return (
    <List>
      <List.Item onClick={handleListItemClick}>列表项1</List.Item>
      <List.Item onClick={handleListItemClick}>列表项2</List.Item>
    </List>
  );
};

10. Modal（模态框）：

import { Modal, Button } from 'antd-mobile';

const ExampleComponent = () => {
  const handleModalClose = () => {
    console.log('关闭模态框');
  };

  return (
    <div>
      <Button onClick={() => Modal.alert('提示', '确认删除吗？', [{ text: '取消' }, { text: '确定', onPress: handleModalClose }])}>
        打开模态框
      </Button>
    </div>
  );
};

11. NavBar（导航栏）：

import { NavBar } from 'antd-mobile';

const ExampleComponent = () => {
  const handleNavLeftClick = () => {
    console.log('左侧按钮被点击了');
  };

  const handleNavRightClick = () => {
    console.log('右侧按钮被点击了');
  };

  return (
    <NavBar
      leftContent="返回"
      onLeftClick={handleNavLeftClick}
      rightContent={<span>更多</span>}
      onRightClick={handleNavRightClick}
    >
      导航栏标题
    </NavBar>
  );
};

12. NoticeBar（通知栏）：

import { NoticeBar } from 'antd-mobile';

const ExampleComponent = () => {
  const handleNoticeBarClose = () => {
    console.log('通知栏关闭');
  };

  return (
    <NoticeBar mode="closable" onClick={handleNoticeBarClose}>
      这是一条通知信息
    </NoticeBar>
  );
};

13. Pagination（分页器）：

import { Pagination } from 'antd-mobile';

const ExampleComponent = () => {
  const handlePageChange = (pageNum) => {
    console.log('当前页码：', pageNum);
  };

  return <Pagination total={10} current={1} onChange={handlePageChange} />;
};

14. Popover（气泡卡片）：

import { Popover, Button } from 'antd-mobile';

const ExampleComponent = () => {
  const handlePopoverVisibleChange = (visible) => {
    console.log('气泡卡片的可见性改变：', visible);
  };

  return (
    <Popover
      visible={true}
      overlay={[{ text: '选项1' }, { text: '选项2' }]}
      align={{ overflow: { adjustY: 0, adjustX: 0 }, offset: [-10, 0] }}
      onVisibleChange={handlePopoverVisibleChange}
    >
      <Button>点击弹出卡片</Button>
    </Popover>
  );
};

15. Progress（进度条）：

import { Progress } from 'antd-mobile';

const ExampleComponent = () => {
  const handleProgressClick = () => {
    console.log('进度条被点击了');
  };

  return <Progress percent={50} onClick={handleProgressClick} />;
};

16. PullToRefresh（下拉刷新）：

import { PullToRefresh, ListView } from 'antd-mobile';

const ExampleComponent = () => {
  const handleRefresh = () => {
    console.log('下拉刷新触发');
    // 执行刷新逻辑
  };

  const handleListViewScroll = () => {
    console.log('滚动事件触发');
    // 执行滚动逻辑
  };

  const dataSource = new ListView.DataSource({
    rowHasChanged: (row1, row2) => row1 !== row2,
  });

  return (
    <ListView
      dataSource={dataSource}
      renderRow={(rowData) => <div>{rowData}</div>}
      refreshControl={<PullToRefresh refreshing={false} onRefresh={handleRefresh} />}
      onScroll={handleListViewScroll}
    />
  );
};

17. Radio（单选框）：

import { Radio } from 'antd-mobile';

const ExampleComponent = () => {
  const handleRadioChange = (value) => {
    console.log('选择的值：', value);
  };

  return (
    <Radio.RadioItem onChange={handleRadioChange}>
      单选框选项
    </Radio.RadioItem>
  );
};

18. Range（范围选择器）：

import { Range } from 'antd-mobile';

const ExampleComponent = () => {
  const handleRangeChange = (values) => {
    console.log('选择的范围：', values);
  };

  return <Range defaultValue={[20, 80]} min={0} max={100} onChange={handleRangeChange} />;
};

19. Result（结果页面）：

import { Result, Button } from 'antd-mobile';

const ExampleComponent = () => {
  const handleButtonClick = () => {
    console.log('按钮被点击了');
  };

  return (
    <Result
      img={<img src="图片地址" alt="结果图标" />}
      title="操作成功"
      message="恭喜，您的操作已成功完成！"
      buttonText="返回首页"
      buttonType="primary"
      onButtonClick={handleButtonClick}
    />
  );
};

20. SearchBar（搜索栏）：

import { SearchBar } from 'antd-mobile';

const ExampleComponent = () => {
  const handleSearch = (value) => {
    console.log('搜索关键字：', value);
    // 执行搜索逻辑
  };

  return <SearchBar placeholder="搜索" onSubmit={handleSearch} />;
};

21. SegmentedControl（分段器）：

import { SegmentedControl } from 'antd-mobile';

const ExampleComponent = () => {
  const handleSegmentChange = (e) => {
    console.log('选中的分段项：', e.nativeEvent.selectedSegmentIndex);
  };

  return <SegmentedControl values={['选项1', '选项2', '选项3']} onChange={handleSegmentChange} />;
};

22. Slider（滑动输入条）：

import { Slider } from 'antd-mobile';

const ExampleComponent = () => {
  const handleSliderChange = (value) => {
    console.log('滑动条值：', value);
  };

  return <Slider defaultValue={50} min={0} max={100} onChange={handleSliderChange} />;
};

23. Stepper（步进器）：

import { Stepper } from 'antd-mobile';

const ExampleComponent = () => {
  const handleStepperChange = (value) => {
    console.log('步进器值：', value);
  };

  return <Stepper defaultValue={1} min={1} max={10} onChange={handleStepperChange} />;
};

24. SwipeAction（滑动操作）：

import { SwipeAction, List } from 'antd-mobile';

const ExampleComponent = () => {
  const handleSwipeActionClick = () => {
    console.log('滑动操作被点击了');
  };

  return (
    <List>
      <SwipeAction
        autoClose
        right={[
          { text: '操作1', onPress: handleSwipeActionClick, style: { backgroundColor: '#F4333C', color: 'white' } },
          { text: '操作2', onPress: handleSwipeActionClick, style: { backgroundColor: '#108EE9', color: 'white' } },
        ]}
      >
        <List.Item>滑动操作示例</List.Item>
      </SwipeAction>
    </List>
  );
};

25. Tabs（标签页）：

import { Tabs } from 'antd-mobile';

const ExampleComponent = () => {
  const handleTabChange = (tab, index) => {
    console.log('当前标签页：', tab.title, index);
  };

  const tabs = [
    { title: '标签1' },
    { title: '标签2' },
    { title: '标签3' },
  ];

  return <Tabs tabs={tabs} onChange={handleTabChange} />;
};

26.Toast（轻提示）：

import { Toast, Button } from 'antd-mobile';

const ExampleComponent = () => {
  const handleToastClick = () => {
    Toast.info('这是一个轻提示', 1);
  };

  return <Button onClick={handleToastClick}>点击显示轻提示</Button>;
};

27.WhiteSpace（上下留白）：

import { WhiteSpace } from 'antd-mobile';

const ExampleComponent = () => {
  return (
    <div>
      <WhiteSpace />
      <div>内容区域</div>
      <WhiteSpace />
    </div>
  );
};

28.WingBlank（两翼留白）：

import { WingBlank } from 'antd-mobile';

const ExampleComponent = () => {
  return (
    <WingBlank>
      <div>内容区域</div>
    </WingBlank>
  );
};

29. Card（卡片）：

import { Card } from 'antd-mobile';

const ExampleComponent = () => {
  return (
    <Card>
      <Card.Header title="卡片标题" />
      <Card.Body>
        <div>卡片内容</div>
      </Card.Body>
      <Card.Footer content="卡片页脚" />
    </Card>
  );
};

30. Carousel（走马灯）：

import { Carousel } from 'antd-mobile';

const ExampleComponent = () => {
  const handleCarouselChange = (index) => {
    console.log('当前轮播图索引：', index);
  };

  const carouselData = ['1', '2', '3'];

  return <Carousel autoplay infinite afterChange={handleCarouselChange}>{carouselData.map((item) => <img src={item} alt="轮播图" />)}</Carousel>;
};

31. Accordion（手风琴）：

import { Accordion } from 'antd-mobile';

const ExampleComponent = () => {
  const handleAccordionChange = (key) => {
    console.log('当前展开的手风琴项：', key);
  };

  const accordionData = [
    { title: '手风琴项1', content: '内容1' },
    { title: '手风琴项2', content: '内容2' },
    { title: '手风琴项3', content: '内容3' },
  ];

  return <Accordion defaultActiveKey="0" onChange={handleAccordionChange}>{accordionData.map((item, index) => <Accordion.Panel key={index} header={item.title}>{item.content}</Accordion.Panel>)}</Accordion>;
};

32. Drawer（抽屉）：

import { Drawer, Button } from 'antd-mobile';

const ExampleComponent = () => {
  const [isOpen, setIsOpen] = useState(false);

  const handleDrawerOpen = () => {
    setIsOpen(true);
  };

  const handleDrawerClose = () => {
    setIsOpen(false);
  };

  return (
    <div>
      <Button onClick={handleDrawerOpen}>打开抽屉</Button>
      <Drawer
        sidebar={<div>抽屉内容</div>}
        open={isOpen}
        onOpenChange={handleDrawerClose}
      >
        <div>页面主体内容</div>
      </Drawer>
    </div>
  );
};

33. ImagePicker（图片选择器）：

import { ImagePicker } from 'antd-mobile';

const ExampleComponent = () => {
  const handleImagePickerChange = (files) => {
    console.log('选择的图片：', files);
  };

  return <ImagePicker onChange={handleImagePickerChange} />;
};

34. PullToRefresh（上拉加载）：

import { PullToRefresh, ListView } from 'antd-mobile';

const ExampleComponent = () => {
  const handleLoadMore = () => {
    console.log('上拉加载触发');
    // 执行加载更多逻辑
  };

  const handleListViewScroll = () => {
    console.log('滚动事件触发');
    // 执行滚动逻辑
  };

  const dataSource = new ListView.DataSource({
    rowHasChanged: (row1, row2) => row1 !== row2,
  });

  return (
    <ListView
      dataSource={dataSource}
      renderRow={(rowData) => <div>{rowData}</div>}
      pullToRefresh={<PullToRefresh onRefresh={handleLoadMore} />}
      onScroll={handleListViewScroll}
    />
  );
};

35. Calendar（日历）：

import { Calendar } from 'antd-mobile';

const ExampleComponent = () => {
  const handleCalendarSelect = (date) => {
    console.log('选择的日期：', date);
  };

  return <Calendar onSelect={handleCalendarSelect} />;
};

36.Checkbox（复选框）：

import { Checkbox } from 'antd-mobile';

const ExampleComponent = () => {
  const handleCheckboxChange = (value) => {
    console.log('选中的值：', value);
  };

  return (
    <Checkbox.CheckboxItem onChange={handleCheckboxChange}>
      复选框选项
    </Checkbox.CheckboxItem>
  );
};

37.DatePicker（日期选择器）：

import { DatePicker } from 'antd-mobile';

const ExampleComponent = () => {
  const handleDatePickerChange = (date) => {
    console.log('选择的日期：', date);
  };

  return <DatePicker mode="date" onChange={handleDatePickerChange} />;
};

38.Picker（选择器）：

import { Picker } from 'antd-mobile';

const ExampleComponent = () => {
  const handlePickerChange = (value) => {
    console.log('选择的值：', value);
  };

  const pickerData = [
    { label: '选项1', value: '1' },
    { label: '选项2', value: '2' },
    { label: '选项3', value: '3' },
  ];

  return <Picker data={pickerData} onChange={handlePickerChange} />;
};

39. TextareaItem（文本框）：

import { TextareaItem } from 'antd-mobile';

const ExampleComponent = () => {
  const handleTextareaChange = (value) => {
    console.log('输入的文本：', value);
  };

  return <TextareaItem rows={4} onChange={handleTextareaChange} />;
};

以上是对一些组件的事件处理示例，希望能够帮助你更好地理解如何处理不同组件的交互事件。如果还有其他需要继续的组件，请告诉我，我将为你提供相应的代码。