debug

package.json

@@ -3,7 +3,7 @@
   "version": "2.0.0",
   "private": true,
   "dependencies": {
-    "antd-mobile": "^2.0.0",
+    "antd-mobile": "^2.3.3",
     "customize-cra": "^1.0.0",
     "lib-flexible": "^0.3.2",
     "postcss-px2rem": "^0.3.0",

src/Pages/EventProcessing/Basic.jsx

 import React from 'react';
-import {WhiteSpace} from 'antd-mobile'
+import './index.less'
 import List from '../../components/List'
 
+const data = Array.from(new Array(7)).map((_val, i) => ({
+    icon: '/img/test/test.png',
+    text: `name${i}`,
+}));
 
 const Basic = () => {
+    const personImg = data.map((item, index) => (
+        <div key={index} className="pos-line">
+            <img alt=""/>
+        </div>
+    ))
+
     const listData = [
         {title: '单位(科室)', content: '文电科'},
         {title: '人数', content: '3'},

src/Pages/EventProcessing/Process.jsx

 import React, {Component} from 'react';
-import {WingBlank, WhiteSpace} from 'antd-mobile'
+import {WingBlank, WhiteSpace, ActionSheet} from 'antd-mobile'
 import './index.less'
 import TopTabs from '../../components/TopTabs'
 import Basic from './Basic'
 import Adjunct from './Adjunct'
 import Flow from './Flow';
-import Option from './Option'
+import Option from './Option';
+
+
+const isIPhone = new RegExp('\\biPhone\\b|\\biPod\\b', 'i').test(window.navigator.userAgent);
+let wrapProps;
+if (isIPhone) {
+    wrapProps = {
+        onTouchStart: e => e.preventDefault(),
+    };
+}
 
 class Process extends Component {
     constructor() {
@@ -48,6 +57,19 @@ class Process extends Component {
         document.getElementById("event").scrollTo(0,top - 9)
     };
 
+    showActionSheet = () => {
+        const BUTTONS = ['送部门领导审核', '送办公室分管主任审批', '办结', '取消'];
+        ActionSheet.showActionSheetWithOptions({
+                options: BUTTONS,
+                cancelButtonIndex: BUTTONS.length - 1,
+                maskClosable: true,
+                wrapProps,
+            },
+            (buttonIndex) => {
+                console.log(buttonIndex)
+            });
+    }
+
     render() {
         return (
             <div>
@@ -65,7 +87,7 @@ class Process extends Component {
                     </WingBlank>
                 </div>
                 <div className="event-footer">
-                    <div className="event-footer-button">
+                    <div className="event-footer-button" onClick={this.showActionSheet}>
                         {this.state.footButton}
                     </div>
 

src/Pages/EventProcessing/index.less

@@ -47,3 +47,22 @@
   border-radius:5px;
   padding: 12px;
 }
+.am-action-sheet{
+  bottom: 10px;
+  left: 10px;
+  right: 10px;
+  border-radius: 7px;
+  width: auto;
+}
+.am-action-sheet-button-list .am-action-sheet-cancel-button-mask{
+  position: relative;
+}
+.am-action-sheet-button-list .am-action-sheet-cancel-button{
+  padding-top: 0;
+}
+
+.pos-line{
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}