chore(Modal): 修复 Modal 模态框 没有内容, MaskLayer 遮罩层 -- 隐藏不了(#227)

cuilanxin · cuilanxin · commit 9af210d021dd · 2021-10-09T14:13:50.000+08:00
diff --git a/example/examples/src/routes/Modal/index.tsx b/example/examples/src/routes/Modal/index.tsx
@@ -10,13 +10,19 @@ export interface ModalViewProps extends ComProps {}
 
 export default class ModalView extends Component<ModalViewProps> {
   state = {
-    modalVisible: true,
+    modalVisible: false,
+    direction: 'top',
   };
 
   setModalVisible(visible: boolean) {
     this.setState({modalVisible: visible});
   }
-
+  radioData = [
+    {label: 'right', value: 'right'},
+    {label: 'left', value: 'left'},
+    {label: 'top', value: 'top'},
+    {label: 'bottom', value: 'bottom'},
+  ];
   render() {
     const {route} = this.props;
     const description = route.params.description;
@@ -28,7 +34,9 @@ export default class ModalView extends Component<ModalViewProps> {
           <Body>
             <Card title="基础实例">
               <Modal
-                placement="right"
+                placement={
+                  this.state.direction as 'left' | 'right' | 'top' | 'bottom'
+                }
                 // maskClosable={false}
                 visible={this.state.modalVisible}
                 onClosed={() => this.setState({modalVisible: false})}
@@ -65,6 +73,21 @@ export default class ModalView extends Component<ModalViewProps> {
               <Button onPress={() => this.setModalVisible(true)}>
                 显示模态框
               </Button>
+              <View style={{flexDirection: 'row'}}>
+                {this.radioData.map(item => {
+                  return (
+                    <Radio
+                      style={{marginRight: 20}}
+                      key={item.value}
+                      checked={this.state.direction === item.value}
+                      onPress={() => {
+                        this.setState({direction: item.value});
+                      }}>
+                      {item.label}
+                    </Radio>
+                  );
+                })}
+              </View>
               <Radio>所有人可见</Radio>
               <Radio>超级管理员</Radio>
             </Card>
diff --git a/packages/core/src/Modal/index.tsx b/packages/core/src/Modal/index.tsx
@@ -1,5 +1,5 @@
-import React, { useState, useMemo } from 'react';
-import { Animated, StyleSheet, LayoutChangeEvent } from 'react-native';
+import React, { useState, useMemo, useRef } from 'react';
+import { Animated, StyleSheet, LayoutChangeEvent, View } from 'react-native';
 import MaskLayer, { MaskLayerProps } from '../MaskLayer';
 
 export interface ModalProps extends MaskLayerProps {
@@ -9,7 +9,8 @@ export interface ModalProps extends MaskLayerProps {
 
 export default (props: ModalProps = {}) => {
   const { onClosed, visible, children, placement = 'bottom', ...otherProps } = props;
-  const [display] = useState<'none' | 'flex'>('none');
+  const AnimatedOpacity: Animated.Value = useRef(new Animated.Value(0)).current;
+  // const [display] = useState<'none' | 'flex'>('none');
   let [layoutHeight, setLayoutHeight] = useState(0);
   let [layoutWidth, setLayoutWidth] = useState(0);
   const [translateValue] = useState(new Animated.Value(0));
@@ -43,26 +44,36 @@ export default (props: ModalProps = {}) => {
     return 0;
   }
   useMemo(() => {
-    if (visible && (layoutHeight !== 0 || layoutWidth !== 0)) {
-      translateValue.setValue(getTransformSize());
-      Animated.parallel([
-        Animated.spring(translateValue, {
-          toValue: 0,
-          overshootClamping: true,
-          useNativeDriver: true,
-        }),
-      ]).start();
-    } else if (layoutHeight !== 0 || layoutWidth !== 0) {
+    const result = getTransformSize();
+    if (!result) return;
+    if (visible) {
+      translateValue.setValue(result);
+      // AnimatedOpacity
+      Animated.timing(AnimatedOpacity, {
+        toValue: 1,
+        duration: 0,
+        useNativeDriver: false,
+      }).start(({ finished }) => {
+        Animated.parallel([
+          Animated.spring(translateValue, {
+            toValue: 0,
+            overshootClamping: true,
+            useNativeDriver: true,
+          }),
+        ]).start();
+      });
+    }
+    if (!visible) {
       Animated.parallel([
         Animated.spring(translateValue, {
-          toValue: getTransformSize(),
+          toValue: result,
           overshootClamping: true,
           useNativeDriver: true,
         }),
       ]).start();
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [visible, layoutHeight]);
+  }, [visible, getTransformSize]);
   const translateStyle = {} as {
     translateY: Animated.Value;
     translateX: Animated.Value;
@@ -74,18 +85,20 @@ export default (props: ModalProps = {}) => {
     translateStyle.translateX = translateValue;
   }
   const child = (
-    <Animated.View
-      onLayout={measureContainer}
-      style={[
-        styles.content,
-        placement && styles[placement],
-        !layoutHeight && isVertical ? { display: display } : {},
-        !layoutWidth && isHorizontal ? { display: display } : {},
-        // // getTransformStyle(),
-        { transform: [translateStyle] },
-      ]}
-    >
-      {children}
+    <Animated.View style={[styles.content, placement && styles[placement], { opacity: AnimatedOpacity }]}>
+      <Animated.View
+        onLayout={measureContainer}
+        style={[
+          styles.content,
+          placement && styles[placement],
+          // !layoutHeight && isVertical ? { display: display } : {},
+          // !layoutWidth && isHorizontal ? { display: display } : {},
+          // // getTransformStyle(),
+          { transform: [translateStyle] },
+        ]}
+      >
+        {children}
+      </Animated.View>
     </Animated.View>
   );
   return (
