fix(Modal): 增加平滑过度

Author: ChenlingasMx

example/base/App.js

@@ -5,24 +5,10 @@
  */
 
 import React from 'react';
-import {
-  SafeAreaView,
-  ScrollView,
-  StatusBar,
-  StyleSheet,
-  Text,
-  useColorScheme,
-  View,
-} from 'react-native';
+import {SafeAreaView, ScrollView, StatusBar, StyleSheet, Text, useColorScheme, View} from 'react-native';
 import {Button, Icon} from '@uiw/react-native';
 
-import {
-  Colors,
-  DebugInstructions,
-  Header,
-  LearnMoreLinks,
-  ReloadInstructions,
-} from 'react-native/Libraries/NewAppScreen';
+import {Colors, DebugInstructions, Header, LearnMoreLinks, ReloadInstructions} from 'react-native/Libraries/NewAppScreen';
 
 const Section = ({children, title}) => {
   const isDarkMode = useColorScheme() === 'dark';
@@ -60,9 +46,7 @@ const App = () => {
   return (
     <SafeAreaView style={backgroundStyle}>
       <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
-      <ScrollView
-        contentInsetAdjustmentBehavior="automatic"
-        style={backgroundStyle}>
+      <ScrollView contentInsetAdjustmentBehavior="automatic" style={backgroundStyle}>
         <Header />
         <View
           style={{
@@ -71,18 +55,15 @@ const App = () => {
           <Button type="primary">按钮之间的间距</Button>
           <Icon name="apple" size={46} color="#50CB42" />
           <Section title="Step One">
-            Edit <Text style={styles.highlight}>App.js</Text> to change this
-            screen and then come back to see your edits.
+            Edit <Text style={styles.highlight}>App.js</Text> to change this screen and then come back to see your edits.
           </Section>
           <Section title="See Your Changes">
             <ReloadInstructions />
           </Section>
           <Section title="Debug">
             <DebugInstructions />
           </Section>
-          <Section title="Learn More">
-            Read the docs to discover what to do next:
-          </Section>
+          <Section title="Learn More">Read the docs to discover what to do next:</Section>
           <LearnMoreLinks />
         </View>
       </ScrollView>

packages/core/src/Modal/index.tsx

@@ -1,5 +1,5 @@
-import React, { useState, useMemo, useRef } from 'react';
-import { Animated, StyleSheet, LayoutChangeEvent, Dimensions, ViewStyle } from 'react-native';
+import React, { useState, useMemo, useRef, useLayoutEffect } from 'react';
+import { Animated, StyleSheet, LayoutChangeEvent, Dimensions, ViewStyle, LayoutAnimation } from 'react-native';
 import MaskLayer, { MaskLayerProps } from '../MaskLayer';
 
 let MainWidth = Dimensions.get('window').width;
@@ -23,7 +23,9 @@ const Modal = (props: ModalProps = {}) => {
   function onDismiss() {
     onClosed && onClosed();
   }
+
   function measureContainer(event: LayoutChangeEvent) {
+    LayoutAnimation.linear(); //加入该函数进行布局平滑过渡动画
     const { height, width } = event.nativeEvent.layout;
     if (!layoutHeight && isVertical) {
       setLayoutHeight(height);
@@ -33,7 +35,7 @@ const Modal = (props: ModalProps = {}) => {
     }
   }
 
-  useMemo(() => {
+  useLayoutEffect(() => {
     function getTransformSize() {
       if (placement === 'top') {
         return -layoutHeight;
@@ -108,6 +110,7 @@ const Modal = (props: ModalProps = {}) => {
       </Animated.View>
     </Animated.View>
   );
+
   return (
     <MaskLayer {...otherProps} visible={visible} onDismiss={onDismiss}>
       {child}