@mpxjs/webpack-plugin 2.10.4-beta.2 → 2.10.4-beta.4

package/lib/react/processJSON.js

@@ -113,13 +113,14 @@ module.exports = function (jsonContent, {
   }
 
   if (ctorType === 'page') {
-    const keysToExtract = ['navigationStyle']
+    // const keysToExtract = ['navigationStyle']
     const configObj = {}
-    keysToExtract.forEach(key => {
-      if (jsonObj[key]) {
-        configObj[key] = jsonObj[key]
-      }
-    })
+    // 暂时先不注入数据，后续如需要使用再用
+    // keysToExtract.forEach(key => {
+    //   if (jsonObj[key]) {
+    //     configObj[key] = jsonObj[key]
+    //   }
+    // })
     loaderContext._module.addPresentationalDependency(new RecordPageConfigsMapDependency(parseRequest(loaderContext.resource).resourcePath, configObj))
   }
 

package/lib/runtime/components/react/dist/mpx-keyboard-avoiding-view.jsx

@@ -1,7 +1,6 @@
-import React, { useContext, useEffect, useMemo } from 'react';
+import React, { useContext, useEffect } from 'react';
 import { Keyboard, View } from 'react-native';
 import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated';
-import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import { KeyboardAvoidContext } from './context';
 import { isIOS } from './utils';
 const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
@@ -10,20 +9,10 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
     const offset = useSharedValue(0);
     const basic = useSharedValue('auto');
     const keyboardAvoid = useContext(KeyboardAvoidContext);
-    const dismiss = () => {
-        Keyboard.isVisible() && Keyboard.dismiss();
-    };
-    const gesture = useMemo(() => {
-        return Gesture.Tap()
-            .onEnd(() => {
-            dismiss();
-        }).runOnJS(true);
-    }, []);
-    const animatedStyle = useAnimatedStyle(() => {
-        return Object.assign({
-            transform: [{ translateY: -offset.value }]
-        }, isIOS ? {} : { flexBasis: basic.value });
-    });
+    const animatedStyle = useAnimatedStyle(() => ({
+        transform: [{ translateY: -offset.value }],
+        flexBasis: basic.value
+    }));
     const resetKeyboard = () => {
         if (keyboardAvoid?.current) {
             keyboardAvoid.current = null;
@@ -31,6 +20,9 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
         offset.value = withTiming(0, { duration, easing });
         basic.value = 'auto';
     };
+    const onTouchEnd = () => {
+        Keyboard.isVisible() && Keyboard.dismiss();
+    };
     useEffect(() => {
         let subscriptions = [];
         if (isIOS) {
@@ -46,7 +38,12 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
                             const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing;
                             const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing);
                             const value = aboveOffset > 0 ? belowValue : aboveValue;
-                            offset.value = withTiming(value, { duration, easing });
+                            offset.value = withTiming(value, { duration, easing }, (finished) => {
+                                if (finished) {
+                                    // Set flexBasic after animation to trigger re-layout and reset layout information
+                                    basic.value = '99.99%';
+                                }
+                            });
                         });
                     });
                 }),
@@ -68,11 +65,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
                         const value = aboveOffset > 0 ? belowValue : aboveValue;
                         offset.value = withTiming(value, { duration, easing }, (finished) => {
                             if (finished) {
-                                /**
-                                 * In the Android environment, the layout information is not synchronized after the animation,
-                                 * which results in the inability to correctly trigger element events.
-                                 * Here, we utilize flexBasic to proactively trigger a re-layout
-                                 */
+                                // Set flexBasic after animation to trigger re-layout and reset layout information
                                 basic.value = '99.99%';
                             }
                         });
@@ -85,16 +78,14 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
             subscriptions.forEach(subscription => subscription.remove());
         };
     }, [keyboardAvoid]);
-    return (<GestureDetector gesture={gesture}>
-      <View style={style}>
-        <Animated.View style={[
+    return (<View style={style} onTouchEnd={onTouchEnd}>
+      <Animated.View style={[
             contentContainerStyle,
             animatedStyle
         ]}>
-          {children}
-        </Animated.View>
-      </View>
-    </GestureDetector>);
+        {children}
+      </Animated.View>
+    </View>);
 };
 KeyboardAvoidingView.displayName = 'MpxKeyboardAvoidingView';
 export default KeyboardAvoidingView;

package/lib/runtime/components/react/dist/mpx-web-view.jsx

@@ -1,4 +1,4 @@
-import { forwardRef, useRef, useContext, useMemo, useState, useEffect } from 'react';
+import { forwardRef, useRef, useContext, useMemo, useState } from 'react';
 import { warn, isFunction } from '@mpxjs/utils';
 import Portal from './mpx-portal/index';
 import { getCustomEvent } from './getInnerListeners';
@@ -74,17 +74,17 @@ const _WebView = forwardRef((props, ref) => {
         isNavigateBack.current = false;
     };
     const navigation = useNavigation();
-    useEffect(() => {
-        let beforeRemoveSubscription;
-        if (__mpx_mode__ !== 'ios') {
-            beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle);
-        }
-        return () => {
-            if (isFunction(beforeRemoveSubscription)) {
-                beforeRemoveSubscription();
-            }
-        };
-    }, []);
+    // useEffect(() => {
+    //   let beforeRemoveSubscription:any
+    //   if (__mpx_mode__ !== 'ios') {
+    //     beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle)
+    //   }
+    //   return () => {
+    //     if (isFunction(beforeRemoveSubscription)) {
+    //       beforeRemoveSubscription()
+    //     }
+    //   }
+    // }, [])
     useNodesRef(props, ref, webViewRef, {
         style: defaultWebViewStyle
     });
@@ -160,7 +160,7 @@ const _WebView = forwardRef((props, ref) => {
                 { // case下不允许直接声明，包个块解决该问题
                     const title = postData._documentTitle?.trim();
                     if (title !== undefined) {
-                        navigation && navigation.setOptions({ title });
+                        navigation && navigation.setPageConfig({ navigationBarTitleText: title });
                     }
                 }
                 break;

package/lib/runtime/components/react/mpx-keyboard-avoiding-view.tsx

@@ -1,7 +1,6 @@
-import React, { ReactNode, useContext, useEffect, useMemo } from 'react'
-import { DimensionValue, EmitterSubscription, Keyboard, Platform, View, ViewStyle } from 'react-native'
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, runOnJS } from 'react-native-reanimated'
-import { GestureDetector, Gesture } from 'react-native-gesture-handler'
+import React, { ReactNode, useContext, useEffect } from 'react'
+import { DimensionValue, EmitterSubscription, Keyboard, View, ViewStyle } from 'react-native'
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated'
 import { KeyboardAvoidContext } from './context'
 import { isIOS } from './utils'
 
@@ -19,25 +18,10 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   const basic = useSharedValue('auto')
   const keyboardAvoid = useContext(KeyboardAvoidContext)
 
-  const dismiss = () => {
-    Keyboard.isVisible() && Keyboard.dismiss()
-  }
-
-  const gesture = useMemo(() => {
-    return Gesture.Tap()
-      .onEnd(() => {
-        dismiss()
-      }).runOnJS(true)
-  }, [])
-
-  const animatedStyle = useAnimatedStyle(() => {
-    return Object.assign(
-      {
-        transform: [{ translateY: -offset.value }]
-      },
-      isIOS ? {} : { flexBasis: basic.value as DimensionValue }
-    )
-  })
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{ translateY: -offset.value }],
+    flexBasis: basic.value as DimensionValue
+  }))
 
   const resetKeyboard = () => {
     if (keyboardAvoid?.current) {
@@ -47,6 +31,10 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
     basic.value = 'auto'
   }
 
+  const onTouchEnd = () => {
+    Keyboard.isVisible() && Keyboard.dismiss()
+  }
+
   useEffect(() => {
     let subscriptions: EmitterSubscription[] = []
 
@@ -62,7 +50,12 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
               const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing
               const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing)
               const value = aboveOffset > 0 ? belowValue : aboveValue
-              offset.value = withTiming(value, { duration, easing })
+              offset.value = withTiming(value, { duration, easing }, (finished) => {
+                if (finished) {
+                  // Set flexBasic after animation to trigger re-layout and reset layout information
+                  basic.value = '99.99%'
+                }
+              })
             })
           })
         }),
@@ -82,11 +75,7 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
             const value = aboveOffset > 0 ? belowValue : aboveValue
             offset.value = withTiming(value, { duration, easing }, (finished) => {
               if (finished) {
-                /**
-                 * In the Android environment, the layout information is not synchronized after the animation,
-                 * which results in the inability to correctly trigger element events.
-                 * Here, we utilize flexBasic to proactively trigger a re-layout
-                 */
+                // Set flexBasic after animation to trigger re-layout and reset layout information
                 basic.value = '99.99%'
               }
             })
@@ -102,18 +91,16 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   }, [keyboardAvoid])
 
   return (
-    <GestureDetector gesture={gesture}>
-      <View style={style}>
-        <Animated.View
-          style={[
-            contentContainerStyle,
-            animatedStyle
-          ]}
-        >
-          {children}
-        </Animated.View>
-      </View>
-    </GestureDetector>
+    <View style={style} onTouchEnd={onTouchEnd}>
+      <Animated.View
+        style={[
+          contentContainerStyle,
+          animatedStyle
+        ]}
+      >
+        {children}
+      </Animated.View>
+    </View>
   )
 }
 

package/lib/runtime/components/react/mpx-web-view.tsx

@@ -122,17 +122,17 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
 
   const navigation = useNavigation()
 
-  useEffect(() => {
-    let beforeRemoveSubscription:any
-    if (__mpx_mode__ !== 'ios') {
-      beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle)
-    }
-    return () => {
-      if (isFunction(beforeRemoveSubscription)) {
-        beforeRemoveSubscription()
-      }
-    }
-  }, [])
+  // useEffect(() => {
+  //   let beforeRemoveSubscription:any
+  //   if (__mpx_mode__ !== 'ios') {
+  //     beforeRemoveSubscription = navigation?.addListener?.('beforeRemove', beforeRemoveHandle)
+  //   }
+  //   return () => {
+  //     if (isFunction(beforeRemoveSubscription)) {
+  //       beforeRemoveSubscription()
+  //     }
+  //   }
+  // }, [])
 
   useNodesRef<WebView, WebViewProps>(props, ref, webViewRef, {
     style: defaultWebViewStyle
@@ -212,7 +212,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
         { // case下不允许直接声明，包个块解决该问题
           const title = postData._documentTitle?.trim()
           if (title !== undefined) {
-            navigation && navigation.setOptions({ title })
+            navigation && navigation.setPageConfig({ navigationBarTitleText: title })
           }
         }
         break

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.4-beta.2",
+  "version": "2.10.4-beta.4",
   "description": "mpx compile core",
   "keywords": [
     "mpx"