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

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

@@ -1,14 +1,14 @@
-import { forwardRef, JSX, useRef, useContext, useMemo, createElement, useCallback, useEffect } from 'react'
+import { forwardRef, useRef, useContext, useMemo, useState, createElement, useCallback, useEffect } from 'react'
 import { warn, getFocusedNavigation, isFunction } from '@mpxjs/utils'
-import { Portal } from '@ant-design/react-native'
+import Portal from './mpx-portal'
 import { getCustomEvent } from './getInnerListeners'
 import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy'
 import { WebView } from 'react-native-webview'
 import useNodesRef, { HandlerRef } from './useNodesRef'
 import { getCurrentPage, extendObject } from './utils'
-import { WebViewNavigationEvent, WebViewErrorEvent, WebViewMessageEvent, WebViewNavigation, WebViewProgressEvent } from 'react-native-webview/lib/WebViewTypes'
+import { WebViewNavigationEvent, WebViewErrorEvent, WebViewMessageEvent, WebViewNavigation, WebViewProgressEvent, WebViewSource } from 'react-native-webview/lib/WebViewTypes'
 import { RouteContext } from './context'
-import { BackHandler } from 'react-native'
+import { BackHandler, StyleSheet, View, Text, Platform } from 'react-native'
 
 type OnMessageCallbackEvent = {
   detail: {
@@ -41,13 +41,60 @@ type MessageData = {
   callbackId?: number
 }
 
+type LanguageCode = 'zh-CN' | 'en-US'; // 支持的语言代码
+
+interface ErrorText {
+  text: string;
+  button: string;
+}
+
+type ErrorTextMap = Record<LanguageCode, ErrorText>
+
+const styles = StyleSheet.create({
+  loadErrorContext: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  loadErrorText: {
+    fontSize: 12,
+    color: '#666666',
+    paddingTop: '40%',
+    paddingBottom: 20,
+    paddingLeft: '10%',
+    paddingRight: '10%',
+    textAlign: 'center'
+  },
+  loadErrorButton: {
+    color: '#666666',
+    textAlign: 'center',
+    padding: 10,
+    borderColor: '#666666',
+    borderStyle: 'solid',
+    borderWidth: StyleSheet.hairlineWidth,
+    borderRadius: 10
+  }
+})
+
 const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((props, ref): JSX.Element | null => {
   const { src, bindmessage, bindload, binderror } = props
   const mpx = global.__mpx
+  const errorText: ErrorTextMap = {
+    'zh-CN': {
+      text: '网络不可用，请检查网络设置',
+      button: '重新加载'
+    },
+    'en-US': {
+      text: 'The network is not available. Please check the network settings',
+      button: 'Reload'
+    }
+  }
+  const currentErrorText = errorText[(mpx.i18n.locale as LanguageCode) || 'zh-CN']
+
   if (props.style) {
     warn('The web-view component does not support the style prop.')
   }
   const pageId = useContext(RouteContext)
+  const [pageLoadErr, setPageLoadErr] = useState<boolean>(false)
   const currentPage = useMemo(() => getCurrentPage(pageId), [pageId])
   const webViewRef = useRef<WebView>(null)
   const defaultWebViewStyle = {
@@ -76,6 +123,28 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
 
   const navigation = getFocusedNavigation()
 
+  // ios 16以下版本 的hash会被转义，因此对于iOS环境下在页面load之后再注入hash部分的逻辑
+  let [baseUrl, hashParams = ''] = src.split('#')
+  if (hashParams) hashParams = '#' + hashParams
+  const source = useMemo<WebViewSource>(() => {
+    if (Platform.OS === 'ios') {
+      return { uri: baseUrl };
+    }
+    return { uri: baseUrl + hashParams };
+  }, [baseUrl, hashParams])
+
+  const hashInjectedJavascript = useMemo(() => {
+    if (Platform.OS === 'ios' && hashParams) {
+      return `(function() {
+        try {
+          location.hash = '${hashParams}';
+        } catch(e) {
+        }
+      })()`;
+    }
+    return '';
+  }, [hashParams]);
+
   navigation?.addListener('beforeRemove', beforeRemoveHandle)
 
   useEffect(() => {
@@ -83,6 +152,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
       BackHandler.addEventListener('hardwareBackPress', onAndroidBackPress)
       return () => {
         BackHandler.removeEventListener('hardwareBackPress', onAndroidBackPress)
+        navigation?.removeListener('beforeRemove', beforeRemoveHandle)
       }
     }
   }, [])
@@ -106,6 +176,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     bindload?.(result)
   }
   const _error = function (res: WebViewErrorEvent) {
+    setPageLoadErr(true)
     const result = {
       type: 'error',
       timeStamp: res.timeStamp,
@@ -113,8 +184,14 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
         src: ''
       }
     }
-    binderror?.(result)
+    binderror && binderror(result)
   }
+
+  const _reload = function () {
+    setPageLoadErr(false)
+  }
+  
+
   const injectedJavaScript = `
     if (window.ReactNativeWebView && window.ReactNativeWebView.postMessage) {
       var _documentTitle = document.title;
@@ -138,6 +215,7 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
           return _documentTitle
         }
       });
+      ${hashInjectedJavascript}
     }
     true;
   `
@@ -249,23 +327,34 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
       onLoad: _load
     })
   }
-  if (binderror) {
-    extendObject(events, {
-      onError: _error
-    })
-  }
 
-  return createElement(Portal, null, createElement(WebView, extendObject({
-    style: defaultWebViewStyle,
-    source: { uri: src },
-    ref: webViewRef,
-    javaScriptEnabled: true,
-    onNavigationStateChange: _changeUrl,
-    onMessage: _message,
-    injectedJavaScript: injectedJavaScript,
-    onLoadProgress: _onLoadProgress,
-    allowsBackForwardNavigationGestures: true
-  }, events)))
+  extendObject(events, {
+    onError: _error
+  })
+
+  return (
+      <Portal key={pageLoadErr ? 'error' : 'webview'}>
+        {pageLoadErr
+          ? (
+            <View style={[styles.loadErrorContext, defaultWebViewStyle]}>
+              <View style={styles.loadErrorText}><Text style={{ fontSize: 14, color: '#999999' }}>{currentErrorText.text}</Text></View>
+              <View style={styles.loadErrorButton} onTouchEnd={_reload}><Text style={{ fontSize: 12, color: '#666666' }}>{currentErrorText.button}</Text></View>
+            </View>
+            )
+          : (<WebView
+        style={defaultWebViewStyle}
+        source={source}
+        ref={webViewRef}
+        javaScriptEnabled={true}
+        onNavigationStateChange={_changeUrl}
+        onMessage={_message}
+        injectedJavaScript={injectedJavaScript}
+        onLoadProgress={_onLoadProgress}
+        allowsBackForwardNavigationGestures={true}
+        {...events}
+      ></WebView>)}
+      </Portal>
+  )
 })
 
 _WebView.displayName = 'MpxWebview'

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

@@ -77,7 +77,7 @@ export const createFaces = (
   const degrees = getDegreesRelativeCenter()
   const [screenHeight, offsets] = getScreenHeightsAndOffsets(degrees)
 
-  const scales = [1, 0.925, 0.8]
+  const scales = [0.973, 0.9, 0.8]
 
   return [
     // top items

package/lib/runtime/components/react/types/global.d.ts

@@ -23,6 +23,9 @@ declare module '@mpxjs/utils' {
     },
     setOptions: (params: Record<string, any>) => void,
     addListener: (eventName: string, callback: (e: Event) => void) => void
+    removeListener: (eventName: string, callback: (e: Event) => void) => void
+    dispatch: (eventName: string) => void
+    pageId: number
   } | undefined
 }
 

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

@@ -13,6 +13,7 @@ import {
   WithTimingConfig,
   AnimationCallback
 } from 'react-native-reanimated'
+import { error } from '@mpxjs/utils'
 import { ExtendedViewStyle } from './types/common'
 import type { _ViewProps } from './mpx-view'
 
@@ -166,8 +167,17 @@ const formatStyle = (style: ExtendedViewStyle): ExtendedViewStyle => {
   })
 }
 
-export default function useAnimationHooks<T, P> (props: _ViewProps) {
-  const { style = {}, animation } = props
+export default function useAnimationHooks<T, P> (props: _ViewProps & { enableAnimation?: boolean }) {
+  const { style = {}, animation, enableAnimation } = props
+
+  const enableStyleAnimation = enableAnimation || !!animation
+  const enableAnimationRef = useRef(enableStyleAnimation)
+  if (enableAnimationRef.current !== enableStyleAnimation) {
+    error('[Mpx runtime error]: animation use should be stable in the component lifecycle, or you can set [enable-animation] with true.')
+  }
+
+  if (!enableStyleAnimation) return { enableStyleAnimation }
+
   const originalStyle = formatStyle(style)
   // id 标识
   const id = animation?.id || -1
@@ -336,7 +346,8 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
     }, {} as { [propName: string]: string | number })
   }
   // ** 生成动画样式
-  return useAnimatedStyle(() => {
+
+  const animationStyle = useAnimatedStyle(() => {
     // console.info(`useAnimatedStyle styles=`, originalStyle)
     return animatedStyleKeys.value.reduce((styles, key) => {
       // console.info('getAnimationStyles', key, shareValMap[key].value)
@@ -354,4 +365,9 @@ export default function useAnimationHooks<T, P> (props: _ViewProps) {
       return styles
     }, {} as ExtendedViewStyle)
   })
+
+  return {
+    enableStyleAnimation,
+    animationStyle
+  }
 }

package/package.json

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