@mpxjs/webpack-plugin 2.9.69-beta.7 → 2.9.69-beta.8

package/lib/react/processScript.js

@@ -14,25 +14,27 @@ module.exports = function (script, {
   localPagesMap
 }, callback) {
   let scriptSrcMode = srcMode
+  const mode = loaderContext.getMpx().mode
   if (script) {
     scriptSrcMode = script.mode || scriptSrcMode
   } else {
     script = { tag: 'script' }
   }
-
   let output = '/* script */\n'
   if (ctorType === 'app') {
     output += `
 import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
 import { NavigationContainer, StackActions } from '@react-navigation/native'
-import { createStackNavigator } from '@react-navigation/stack'
+${mode === 'ios' ? "import { createNativeStackNavigator } from '@react-navigation/native-stack'" : "import { createStackNavigator } from '@react-navigation/stack'" }
+import { useHeaderHeight } from '@react-navigation/elements';
 import Provider from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-provider'
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 
 global.__navigationHelper = {
   NavigationContainer: NavigationContainer,
-  createStackNavigator: createStackNavigator,
+  createStackNavigator: ${mode === 'ios' ? 'createNativeStackNavigator' : 'createStackNavigator'},
+  useHeaderHeight: useHeaderHeight,
   StackActions: StackActions,
   GestureHandlerRootView: GestureHandlerRootView,
   Provider: Provider,

package/lib/runtime/components/react/dist/mpx-swiper.jsx

@@ -1,4 +1,4 @@
-import { AppState, View } from 'react-native';
+import { View } from 'react-native';
 import { GestureDetector, Gesture } from 'react-native-gesture-handler';
 import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, runOnJS, useAnimatedReaction, cancelAnimation } from 'react-native-reanimated';
 import React, { forwardRef, useRef, useEffect, useMemo } from 'react';
@@ -63,7 +63,7 @@ const activeDotStyle = {
 };
 const longPressRatio = 100;
 const easeMap = {
-    default: Easing.linear,
+    default: Easing.inOut(Easing.poly(3)),
     linear: Easing.linear,
     easeInCubic: Easing.in(Easing.cubic),
     easeOutCubic: Easing.out(Easing.cubic),
@@ -121,7 +121,6 @@ const SwiperWrapper = forwardRef((props, ref) => {
     const moveTime = useSharedValue(0);
     const timerId = useRef(0);
     const intervalTimer = props.interval || 500;
-    const appState = useRef(AppState.currentState);
     const { 
     // 存储layout布局信息
     layoutRef, layoutProps, layoutStyle } = useLayout({ props, hasSelfPercent, setWidth, setHeight, nodeRef, onLayout: onWrapperLayout });
@@ -235,7 +234,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
     }
     const { loop, pauseLoop, resumeLoop } = useMemo(() => {
         function createAutoPlay() {
-            if (!step.value || appState.current !== 'active')
+            if (!step.value)
                 return;
             let targetOffset = 0;
             let nextIndex = currentIndex.value;
@@ -289,9 +288,7 @@ const SwiperWrapper = forwardRef((props, ref) => {
         // loop在JS线程中调用，createAutoPlay + useEffect中
         function loop() {
             timerId.current && clearTimeout(timerId.current);
-            if (appState.current === 'active') {
-                timerId.current = setTimeout(createAutoPlay, intervalTimer);
-            }
+            timerId.current = setTimeout(createAutoPlay, intervalTimer);
         }
         function pauseLoop() {
             timerId.current && clearTimeout(timerId.current);
@@ -359,21 +356,6 @@ const SwiperWrapper = forwardRef((props, ref) => {
             runOnJS(handleSwiperChange)(newIndex);
         }
     });
-    // 监听切换前后台，默认切换到后台JS执行不会立即停止定时器还在
-    useEffect(() => {
-        const subscription = AppState.addEventListener('change', nextAppState => {
-            appState.current = nextAppState;
-            if (nextAppState === 'active' && autoplayShared.value && childrenLength.value > 1) {
-                loop();
-            }
-            else {
-                appState.current = nextAppState;
-            }
-        });
-        return () => {
-            subscription.remove();
-        };
-    }, []);
     useEffect(() => {
         let patchStep = 0;
         if (preMargin !== preMarginShared.value) {
@@ -392,18 +374,13 @@ const SwiperWrapper = forwardRef((props, ref) => {
     }, [preMargin, nextMargin]);
     useEffect(() => {
         childrenLength.value = children.length;
-        pauseLoop();
         if (children.length - 1 < currentIndex.value) {
+            pauseLoop();
             currentIndex.value = 0;
             offset.value = getOffset(0, step.value);
-        }
-        else {
-            // children变化-其他属性都不变化（比如从1变化到3或者从3变到1， 在circular的情况下offset是需要更新的）
-            currentIndex.value = props.current || 0;
-            offset.value = getOffset(props.current || 0, step.value);
-        }
-        if (autoplay && children.length > 1) {
-            loop();
+            if (autoplay && children.length > 1) {
+                loop();
+            }
         }
     }, [children.length]);
     useEffect(() => {

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

@@ -54,7 +54,8 @@ const _WebView = forwardRef((props, ref) => {
     const [pageLoadErr, setPageLoadErr] = useState(false);
     const currentPage = useMemo(() => getCurrentPage(pageId), [pageId]);
     const webViewRef = useRef(null);
-    const isLoaded = useRef(false);
+    const [isLoaded, setIsLoaded] = useState(true);
+    const fristLoaded = useRef(false);
     const defaultWebViewStyle = {
         position: 'absolute',
         left: 0,
@@ -101,6 +102,9 @@ const _WebView = forwardRef((props, ref) => {
         return null;
     }
     const _reload = function () {
+        if (__mpx_mode__ === 'android') {
+            fristLoaded.current = false; // 安卓需要重新设置
+        }
         setPageLoadErr(false);
     };
     const injectedJavaScript = `
@@ -131,7 +135,7 @@ const _WebView = forwardRef((props, ref) => {
   `;
     const sendMessage = function (params) {
         return `
-      window.mpxWebviewMessageCallback(${params})
+      window.mpxWebviewMessageCallback && window.mpxWebviewMessageCallback(${params})
       true;
     `;
     };
@@ -232,11 +236,10 @@ const _WebView = forwardRef((props, ref) => {
         });
     };
     let isLoadError = false;
-    let fristLoaded = false;
     let statusCode = '';
-    const onLoadEnd = function (res) {
-        fristLoaded = true;
-        isLoaded.current = true;
+    const onLoadEndHandle = function (res) {
+        fristLoaded.current = true;
+        setIsLoaded(true);
         const src = res.nativeEvent?.url;
         if (isLoadError) {
             isLoadError = false;
@@ -262,6 +265,16 @@ const _WebView = forwardRef((props, ref) => {
             bindload?.(result);
         }
     };
+    const onLoadEnd = function (res) {
+        if (__mpx_mode__ === 'android') {
+            setTimeout(() => {
+                onLoadEndHandle(res);
+            }, 0);
+        }
+        else {
+            onLoadEndHandle(res);
+        }
+    };
     const onHttpError = function (res) {
         isLoadError = true;
         statusCode = res.nativeEvent?.statusCode;
@@ -269,12 +282,14 @@ const _WebView = forwardRef((props, ref) => {
     const onError = function () {
         statusCode = '';
         isLoadError = true;
-        if (!fristLoaded) {
+        if (!fristLoaded.current) {
             setPageLoadErr(true);
         }
     };
     const onLoadStart = function () {
-        isLoaded.current = false;
+        if (!fristLoaded.current) {
+            setIsLoaded(false);
+        }
     };
     return (<Portal key={pageLoadErr ? 'error' : 'webview'}>
         {pageLoadErr

package/lib/runtime/components/react/dist/useAnimationHooks.js

@@ -4,10 +4,10 @@ import { error } from '@mpxjs/utils';
 // 微信 timingFunction 和 RN Easing 对应关系
 const EasingKey = {
     linear: Easing.linear,
-    ease: Easing.ease,
-    'ease-in': Easing.in(Easing.ease),
-    'ease-in-out': Easing.inOut(Easing.ease),
-    'ease-out': Easing.out(Easing.ease)
+    ease: Easing.inOut(Easing.ease),
+    'ease-in': Easing.in(Easing.poly(3)),
+    'ease-in-out': Easing.inOut(Easing.poly(3)),
+    'ease-out': Easing.out(Easing.poly(3))
     // 'step-start': '',
     // 'step-end': ''
 };

package/lib/runtime/components/react/mpx-swiper.tsx

@@ -1,4 +1,4 @@
-import { AppState, View, NativeSyntheticEvent, LayoutChangeEvent } from 'react-native'
+import { View, NativeSyntheticEvent, LayoutChangeEvent } from 'react-native'
 import { GestureDetector, Gesture } from 'react-native-gesture-handler'
 import Animated, { useAnimatedStyle, useSharedValue, withTiming, Easing, runOnJS, useAnimatedReaction, cancelAnimation } from 'react-native-reanimated'
 
@@ -117,7 +117,7 @@ const activeDotStyle = {
 const longPressRatio = 100
 
 const easeMap = {
-  default: Easing.linear,
+  default: Easing.inOut(Easing.poly(3)),
   linear: Easing.linear,
   easeInCubic: Easing.in(Easing.cubic),
   easeOutCubic: Easing.out(Easing.cubic),
@@ -195,7 +195,6 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   const moveTime = useSharedValue(0)
   const timerId = useRef(0 as number | ReturnType<typeof setTimeout>)
   const intervalTimer = props.interval || 500
-  const appState = useRef(AppState.currentState)
   const {
     // 存储layout布局信息
     layoutRef,
@@ -315,7 +314,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
 
   const { loop, pauseLoop, resumeLoop } = useMemo(() => {
     function createAutoPlay () {
-      if (!step.value || appState.current !== 'active') return
+      if (!step.value) return
       let targetOffset = 0
       let nextIndex = currentIndex.value
       if (!circularShared.value) {
@@ -367,9 +366,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     // loop在JS线程中调用，createAutoPlay + useEffect中
     function loop () {
       timerId.current && clearTimeout(timerId.current)
-      if (appState.current === 'active') {
-        timerId.current = setTimeout(createAutoPlay, intervalTimer)
-      }
+      timerId.current = setTimeout(createAutoPlay, intervalTimer)
     }
 
     function pauseLoop () {
@@ -437,20 +434,6 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       runOnJS(handleSwiperChange)(newIndex)
     }
   })
-  // 监听切换前后台，默认切换到后台JS执行不会立即停止定时器还在
-  useEffect(() => {
-    const subscription = AppState.addEventListener('change', nextAppState => {
-      appState.current = nextAppState
-      if (nextAppState === 'active' && autoplayShared.value && childrenLength.value > 1) {
-        loop()
-      } else {
-        appState.current = nextAppState
-      }
-    })
-    return () => {
-      subscription.remove()
-    }
-  }, [])
 
   useEffect(() => {
     let patchStep = 0
@@ -471,17 +454,13 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
 
   useEffect(() => {
     childrenLength.value = children.length
-    pauseLoop()
     if (children.length - 1 < currentIndex.value) {
+      pauseLoop()
       currentIndex.value = 0
       offset.value = getOffset(0, step.value)
-    } else {
-      // children变化-其他属性都不变化（比如从1变化到3或者从3变到1， 在circular的情况下offset是需要更新的）
-      currentIndex.value = props.current || 0
-      offset.value = getOffset(props.current || 0, step.value)
-    }
-    if (autoplay && children.length > 1) {
-      loop()
+      if (autoplay && children.length > 1) {
+        loop()
+      }
     }
   }, [children.length])
 

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

@@ -99,7 +99,9 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
   const [pageLoadErr, setPageLoadErr] = useState<boolean>(false)
   const currentPage = useMemo(() => getCurrentPage(pageId), [pageId])
   const webViewRef = useRef<WebView>(null)
-  const isLoaded = useRef<boolean>(false)
+  const [isLoaded, setIsLoaded] = useState<boolean>(true)
+  const fristLoaded = useRef<boolean>(false)
+  
   const defaultWebViewStyle = {
     position: 'absolute' as 'absolute' | 'relative' | 'static',
     left: 0 as number,
@@ -153,6 +155,9 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
   }
 
   const _reload = function () {
+    if (__mpx_mode__ === 'android') {
+      fristLoaded.current = false // 安卓需要重新设置
+    }
     setPageLoadErr(false)
   }
   
@@ -186,7 +191,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
 
   const sendMessage = function (params: string) {
     return `
-      window.mpxWebviewMessageCallback(${params})
+      window.mpxWebviewMessageCallback && window.mpxWebviewMessageCallback(${params})
       true;
     `
   }
@@ -288,11 +293,10 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
   }
 
   let isLoadError = false
-  let fristLoaded = false
   let statusCode: string | number = ''
-  const onLoadEnd = function (res: WebViewEvent) {
-    fristLoaded = true
-    isLoaded.current = true
+  const onLoadEndHandle = function (res: WebViewEvent) {
+    fristLoaded.current = true
+    setIsLoaded(true)
     const src = res.nativeEvent?.url
     if (isLoadError) {
       isLoadError = false
@@ -317,6 +321,15 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
       bindload?.(result)
     }
   }
+  const onLoadEnd = function (res: WebViewEvent) {
+    if (__mpx_mode__ === 'android') {
+      setTimeout(() => {
+        onLoadEndHandle(res)
+      }, 0)
+    } else {
+      onLoadEndHandle(res)
+    }
+  }
   const onHttpError = function (res: WebViewHttpErrorEvent) {
     isLoadError = true
     statusCode = res.nativeEvent?.statusCode
@@ -324,12 +337,14 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
   const onError = function () {
     statusCode = ''
     isLoadError = true
-    if (!fristLoaded) {
+    if (!fristLoaded.current) {
       setPageLoadErr(true)
     }
   }
   const onLoadStart = function () {
-    isLoaded.current = false
+    if (!fristLoaded.current) {
+      setIsLoaded(false)
+    }
   }
 
   return (

package/lib/runtime/components/react/useAnimationHooks.ts

@@ -40,10 +40,10 @@ export type AnimationProp = {
 // 微信 timingFunction 和 RN Easing 对应关系
 const EasingKey = {
   linear: Easing.linear,
-  ease: Easing.ease,
-  'ease-in': Easing.in(Easing.ease),
-  'ease-in-out': Easing.inOut(Easing.ease),
-  'ease-out': Easing.out(Easing.ease)
+  ease: Easing.inOut(Easing.ease),
+  'ease-in': Easing.in(Easing.poly(3)),
+  'ease-in-out': Easing.inOut(Easing.poly(3)),
+  'ease-out': Easing.out(Easing.poly(3))
   // 'step-start': '',
   // 'step-end': ''
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.9.69-beta.7",
+  "version": "2.9.69-beta.8",
   "description": "mpx compile core",
   "keywords": [
     "mpx"