fix(ActionSheet):修改ActionSheet点击不显示

Author: huqiaoli

example/examples/src/routes/ActionSheet/index.tsx

@@ -41,17 +41,15 @@ export default class Index extends Component<IndexProps, IndexState> {
               maskClosable={true}
               dividerStyle={{
                 itemDivider: {height: 2},
-              }}>
+              }}
+              onCancel={this.onCancel}>
               <ActionSheetItem
                 onPress={() => {
                   Toast.info('你点击了按钮一', 2, 'info');
                 }}>
                 按钮一
               </ActionSheetItem>
-              <ActionSheetItem
-                onPress={() => Toast.info('你点击了按钮二', 2, 'info')}>
-                按钮二
-              </ActionSheetItem>
+              <ActionSheetItem onPress={() => Toast.info('你点击了按钮二', 2, 'info')}>按钮二</ActionSheetItem>
               <ActionSheetItem onPress={this.onCancel}>关闭</ActionSheetItem>
             </ActionSheet>
           </Body>

packages/core/src/ActionSheet/README.md

@@ -56,13 +56,14 @@ export default Demo
 
 | 参数 | 说明 | 类型 | 默认值 |
 |------|------|-----|------|
-| onCancel | 点击蒙层是否关闭 | Boolean | `false` |
+| isCancel | 点击蒙层是否关闭 | Boolean | `true` |
 | dividerStyle | 分割线样式 | DividerStyleProps | - |
 | containerStyle | 取消的容器样式 | StyleProp<`ViewStyle`> | - |
 | activeOpacity | 动作在被触摸操作激活时以多少不透明度显示 | number | `#f1f1f1` |
 | underlayColor | 动作有触摸操作时显示出来的底层的颜色 | string | `#f1f1f1` |
 | cancelText | 取消的文本 | `React.ReactNode` | - |
 | textStyle | 取消的文本样式 | `StyleProp<TextStyle>` | - |
+| onCancel | 蒙层关闭回调 | `() => void` | - |
 
 ### DividerStyleProps
 | 参数 | 说明 | 类型 | 默认值 |

packages/core/src/ActionSheet/index.tsx

@@ -13,7 +13,7 @@ export interface DividerStyle {
 
 export interface ActionSheetProps extends ModalProps {
   /** 点击蒙层是否关闭 */
-  onCancel?: Boolean;
+  isCancel?: Boolean;
   /** 分割线样式 */
   dividerStyle?: DividerStyle;
   /** 取消的容器样式 */
@@ -26,6 +26,8 @@ export interface ActionSheetProps extends ModalProps {
   underlayColor?: string;
   /** 取消的文本 */
   cancelText?: React.ReactNode;
+  /** 蒙层关闭回调 */
+  onCancel?: () => void;
 }
 
 interface ActionSheetState {
@@ -41,9 +43,10 @@ export default function ActionSheet(props: ActionSheetProps) {
     underlayColor,
     cancelText = '取消',
     dividerStyle,
-    onCancel,
+    isCancel = true,
     containerStyle,
     textStyle,
+    onCancel,
     ...other
   } = props;
 
@@ -70,7 +73,14 @@ export default function ActionSheet(props: ActionSheetProps) {
         stateVisible: !!props.visible,
       });
     }
-  }, [state.stateVisible]);
+  }, [state.stateVisible, props.visible]);
+
+  const onModalClose = () => {
+    if (isCancel) {
+      setState({ stateVisible: false, control: 'state' });
+      onCancel?.();
+    }
+  };
 
   const onClose = () => {
     setState({ stateVisible: false, control: 'state' });
@@ -83,7 +93,7 @@ export default function ActionSheet(props: ActionSheetProps) {
       transparent={true}
       {...other}
       visible={state.stateVisible}
-      onClosed={onClose}
+      onClosed={onModalClose}
     >
       <>
         {React.Children.toArray(children).map((item, index) => (