@mpxjs/webpack-plugin 2.10.7-beta.9 → 2.10.8-beta.1

package/lib/runtime/components/react/mpx-page-container.tsx

@@ -0,0 +1,394 @@
+import React, { createElement, forwardRef, useEffect, useRef, useState } from 'react'
+import {
+  StyleSheet,
+  Animated,
+  Dimensions,
+  TouchableWithoutFeedback,
+  PanResponder,
+  StyleProp,
+  ViewStyle
+} from 'react-native'
+import Portal from './mpx-portal/index'
+import { PreventRemoveEvent, usePreventRemove } from '@react-navigation/native'
+import { extendObject, useLayout, useNavigation } from './utils'
+import useInnerProps, { getCustomEvent } from './getInnerListeners'
+import useNodesRef from './useNodesRef'
+
+type Position = 'top' | 'bottom' | 'right' | 'center';
+
+interface PageContainerProps {
+    show: boolean;
+    duration?: number;
+    'z-index'?: number;
+    overlay?: boolean;
+    position?: Position;
+    round?: boolean;
+    'close-on-slide-down'?: boolean;
+    'overlay-style'?: StyleProp<ViewStyle>;
+    'custom-style'?: StyleProp<ViewStyle>;
+
+    bindclose: (event: CustomEvent<{ value: boolean}>) => void;
+
+    bindbeforeenter?: (event: CustomEvent) => void;
+    bindenter?: (event: CustomEvent) => void;
+    bindafterenter?: (event: CustomEvent) => void;
+    bindbeforeleave?: (event: CustomEvent) => void;
+    bindleave?: (event: CustomEvent) => void;
+    bindafterleave?: (event: CustomEvent) => void;
+    bindclickoverlay?: (event: CustomEvent) => void;
+    children: React.ReactNode;
+}
+
+const screenHeight = Dimensions.get('window').height
+const screenWidth = Dimensions.get('window').width
+
+function nextTick (cb: () => void) {
+  setTimeout(cb, 0)
+}
+
+export default forwardRef<any, PageContainerProps>((props, ref) => {
+  const {
+    show,
+    duration = 300,
+    'z-index': zIndex = 100,
+    overlay = true,
+    position = 'bottom',
+    round = false,
+    'close-on-slide-down': closeOnSlideDown = false,
+    'overlay-style': overlayStyle,
+    'custom-style': customStyle,
+    bindclose, // RN下特有属性，用于同步show状态到父组件
+    bindbeforeenter,
+    bindenter,
+    bindafterenter,
+    bindbeforeleave,
+    bindleave,
+    bindafterleave,
+    bindclickoverlay,
+    children
+  } = props
+
+  const isFirstRenderFlag = useRef(true)
+  const isFirstRender = isFirstRenderFlag.current
+  if (isFirstRenderFlag.current) {
+    isFirstRenderFlag.current = false
+  }
+
+  const close = () => {
+    bindclose(getCustomEvent(
+      'close',
+      {},
+      { detail: { value: false, source: 'close' } },
+      props
+    ))
+  }
+
+  const [internalVisible, setInternalVisible] = useState(show) // 控制组件是否挂载
+
+  const overlayOpacity = useRef(new Animated.Value(0)).current
+  const contentOpacity = useRef(new Animated.Value(position === 'center' ? 0 : 1)).current
+  const contentTranslate = useRef(new Animated.Value(getInitialPosition())).current
+
+  const currentAnimation = useRef<Array<Animated.CompositeAnimation> | null>(null)
+
+  function getInitialPosition () {
+    switch (position) {
+      case 'top':
+        return -screenHeight
+      case 'bottom':
+        return screenHeight
+      case 'right':
+        return screenWidth
+      case 'center':
+        return 0
+      default:
+        return screenHeight
+    }
+  }
+
+  const currentTick = useRef(0)
+  function createTick () {
+    currentTick.current++
+    console.log('currentTick.current++', currentTick.current)
+    const current = currentTick.current
+    return () => {
+      console.log('currentTick.current', currentTick.current, 'current', current)
+      return currentTick.current === current
+    }
+  }
+  // 播放入场动画
+  const animateIn = () => {
+    const isCurrentTick = createTick()
+    const animateOutFinish = currentAnimation.current === null
+    if (!animateOutFinish) {
+            currentAnimation.current!.forEach((animation) => animation.stop())
+    }
+    const animations: Animated.CompositeAnimation[] = [
+      Animated.timing(contentTranslate, {
+        toValue: 0,
+        duration,
+        useNativeDriver: true
+      }),
+      Animated.timing(contentOpacity, {
+        toValue: 1,
+        duration,
+        useNativeDriver: true
+      }),
+      Animated.timing(overlayOpacity, {
+        toValue: 1,
+        duration,
+        useNativeDriver: true
+      })
+    ]
+    currentAnimation.current = animations
+    // 所有生命周期需相隔一个nextTick以保证在生命周期中修改show可在组件内部监听到
+    bindbeforeenter && bindbeforeenter(getCustomEvent(
+      'beforeenter',
+      {},
+      { detail: { value: false, source: 'beforeenter' } },
+      props
+    ))
+    nextTick(() => {
+      bindenter && bindenter(getCustomEvent(
+        'enter',
+        {},
+        { detail: { value: false, source: 'enter' } },
+        props
+      ))
+      // 与微信对其， bindenter 需要执行，所以 isCurrentTick 放在后面
+      if (!isCurrentTick()) return
+
+      console.log('animateIn start')
+      // 设置为动画初始状态(特殊情况， 如果退场动画没有结束 或者 退场动画还未开始，则无需初始化，而是从当前位置完成动画)
+      if (animateOutFinish) {
+        contentTranslate.setValue(getInitialPosition())
+        contentOpacity.setValue(position === 'center' ? 0 : 1)
+      }
+      Animated.parallel(animations).start(() => {
+        bindafterenter && bindafterenter(getCustomEvent(
+          'afterenter',
+          {},
+          { detail: { value: false, source: 'afterenter' } },
+          props
+        ))
+      })
+    })
+  }
+
+  // 播放离场动画
+  const animateOut = () => {
+    const isCurrentTick = createTick()
+    // 停止入场动画
+    currentAnimation.current?.forEach((animation) => animation.stop())
+    const animations: Animated.CompositeAnimation[] = [Animated.timing(overlayOpacity, {
+      toValue: 0,
+      duration,
+      useNativeDriver: true
+    })
+    ]
+    if (position === 'center') {
+      animations.push(Animated.timing(contentOpacity, {
+        toValue: 0,
+        duration,
+        useNativeDriver: true
+      }))
+    } else {
+      animations.push(Animated.timing(contentTranslate, {
+        toValue: getInitialPosition(),
+        duration,
+        useNativeDriver: true
+      }))
+    }
+    currentAnimation.current = animations
+    bindbeforeleave && bindbeforeleave(getCustomEvent(
+      'beforeleave',
+      {},
+      { detail: { value: false, source: 'beforeleave' } },
+      props
+    ))
+    nextTick(() => {
+      bindleave && bindleave(getCustomEvent(
+        'leave',
+        {},
+        { detail: { value: false, source: 'leave' } },
+        props
+      ))
+      if (!isCurrentTick()) return
+      console.log('animateOut start')
+      Animated.parallel(animations).start(() => {
+        currentAnimation.current = null
+        bindafterleave && bindafterleave(getCustomEvent(
+          'afterleave',
+          {},
+          { detail: { value: false, source: 'afterleave' } },
+          props
+        ))
+        setInternalVisible(false) // 动画播放完后，才卸载
+      })
+    })
+  }
+
+  useEffect(() => {
+    console.log('====comp show', show, 'internalVisible', internalVisible)
+    // 如果展示状态和挂载状态一致，则不需要做任何操作
+    if (show) {
+      setInternalVisible(true) // 确保挂载
+      animateIn()
+    } else {
+      if (!isFirstRender) animateOut()
+    }
+  }, [show])
+
+  const navigation = useNavigation()
+  usePreventRemove(show, (event: PreventRemoveEvent) => {
+    const { data } = event
+    if (show) {
+      close()
+    } else {
+      navigation?.dispatch(data.action)
+    }
+  })
+
+  // IOS 下需要关闭手势返回（原因： IOS手势返回时页面会跟随手指滑动，但是实际返回动作是在松手时触发，需禁掉页面跟随手指滑动的效果）
+  useEffect(() => {
+    navigation?.setOptions({
+      gestureEnabled: !show
+    })
+  }, [show])
+
+  const SCREEN_EDGE_THRESHOLD = 60 // 从屏幕左侧 30px 内触发
+
+  // 内容区 手势下滑关闭
+  const contentPanResponder = PanResponder.create({
+    onMoveShouldSetPanResponder: (_, gestureState) => {
+      const { dx, dy } = gestureState
+      return dy > 200 && Math.abs(dx) < 60
+    },
+    onPanResponderRelease: () => {
+      close()
+    }
+  })
+
+  // 全屏幕 IOS 右滑手势返回
+  const screenPanResponder = PanResponder.create({
+    onMoveShouldSetPanResponder: (_, gestureState) => {
+      const { moveX, dx, dy } = gestureState
+
+      const isFromEdge = moveX < SCREEN_EDGE_THRESHOLD
+      const isHorizontalSwipe = dx > 10 && Math.abs(dy) < 20
+      return isFromEdge && isHorizontalSwipe
+    },
+    onPanResponderRelease: (_, gestureState) => {
+      if (gestureState.dx > 100) {
+        close()
+      }
+    }
+  })
+
+  const getTransformStyle: () => ViewStyle = () => {
+    switch (position) {
+      case 'top':
+      case 'bottom':
+        return { transform: [{ translateY: contentTranslate }] }
+      case 'right':
+        return { transform: [{ translateX: contentTranslate }] }
+      case 'center':
+        return {}
+    }
+  }
+
+  const renderMask = () => {
+    const onPress = () => {
+      close()
+      bindclickoverlay && bindclickoverlay(getCustomEvent(
+        'clickoverlay',
+        {},
+        { detail: { value: false, source: 'clickoverlay' } },
+        props
+      ))
+    }
+    return createElement(TouchableWithoutFeedback, { onPress },
+      createElement(Animated.View, { style: [styles.overlay, overlayStyle, { opacity: overlayOpacity }] }))
+  }
+
+  const renderContent = (children: React.ReactNode) => {
+    const contentProps = extendObject(
+      {
+        style: [
+          styles.container,
+          round ? styles.rounded : null,
+          positionStyle[position],
+          customStyle,
+          getTransformStyle(),
+          { opacity: contentOpacity }
+        ]
+      },
+      closeOnSlideDown ? contentPanResponder.panHandlers : null
+    )
+    return createElement(Animated.View, contentProps, children)
+  }
+
+  const nodeRef = useRef(null)
+  useNodesRef(props, ref, nodeRef, {})
+  const { layoutRef, layoutProps } = useLayout({ props, hasSelfPercent: false, nodeRef })
+  const innerProps = useInnerProps(
+    extendObject(
+      {},
+      props,
+      {
+        ref: nodeRef
+      },
+      layoutProps
+    ),
+    [],
+    { layoutRef }
+  )
+  const wrapperProps = extendObject(
+    innerProps,
+    {
+      style: [styles.wrapper, { zIndex }]
+    },
+    __mpx_mode__ === 'ios' ? screenPanResponder.panHandlers : {}
+  )
+
+  // TODO 是否有必要支持refs? dataset?
+  return createElement(Portal, null,
+    internalVisible
+      ? createElement(Animated.View, wrapperProps,
+        overlay ? renderMask() : null,
+        renderContent(children)
+      )
+      : null
+  )
+})
+
+const styles = StyleSheet.create({
+  wrapper: extendObject(
+    {
+      justifyContent: 'flex-end',
+      alignItems: 'center'
+    } as const,
+    StyleSheet.absoluteFillObject
+  ),
+  overlay: extendObject(
+    {
+      backgroundColor: 'rgba(0,0,0,0.5)'
+    },
+    StyleSheet.absoluteFillObject
+  ),
+  container: {
+    position: 'absolute',
+    backgroundColor: 'white'
+  },
+  rounded: {
+    borderTopLeftRadius: 20,
+    borderTopRightRadius: 20
+  }
+})
+
+const positionStyle: Record<Position, ViewStyle> = {
+  bottom: { bottom: 0, width: '100%', height: 'auto' },
+  top: { top: 0, width: '100%', height: 'auto' },
+  right: extendObject({}, StyleSheet.absoluteFillObject, { right: 0 }),
+  center: extendObject({}, StyleSheet.absoluteFillObject)
+}

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

@@ -23,7 +23,6 @@ import Portal from './mpx-portal'
  * ✔ easing-function  ="easeOutCubic"
  * ✘ display-multiple-items
  * ✘ snap-to-edge
- * ✔ disableGesture
  */
 type EaseType = 'default' | 'linear' | 'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic'
 type StrAbsoType = 'absoluteX' | 'absoluteY'
@@ -144,7 +143,8 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     style = {},
     autoplay = false,
     circular = false,
-    disableGesture = false
+    disableGesture = false,
+    bindchange
   } = props
   const easeingFunc = props['easing-function'] || 'default'
   const easeDuration = props.duration || 500
@@ -207,10 +207,6 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   const moveTranstion = useSharedValue(0)
   // 记录从onBegin 到 onTouchesUp 的时间
   const moveTime = useSharedValue(0)
-  // 记录从onBegin 到 onTouchesCancelled 另外一个方向移动的距离
-  const anotherDirectionMove = useSharedValue(0)
-  // 另一个方向的
-  const anotherAbso = 'absolute' + (dir === 'x' ? 'y' : 'x').toUpperCase() as StrAbsoType
   const timerId = useRef(0 as number | ReturnType<typeof setTimeout>)
   const intervalTimer = props.interval || 500
 
@@ -433,6 +429,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
     if (props.current !== currentIndex.value) {
       const eventData = getCustomEvent('change', {}, { detail: { current, source: 'touch' }, layoutRef: layoutRef })
       props.bindchange && props.bindchange(eventData)
+      bindchange && bindchange(eventData)
     }
   }
 
@@ -474,7 +471,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   // 1. 用户在当前页切换选中项，动画；用户携带选中index打开到swiper页直接选中不走动画
   useAnimatedReaction(() => currentIndex.value, (newIndex: number, preIndex: number) => {
     // 这里必须传递函数名, 直接写()=> {}形式会报 访问了未sharedValue信息
-    if (newIndex !== preIndex && props.bindchange) {
+    if (newIndex !== preIndex && bindchange) {
       runOnJS(handleSwiperChange)(newIndex)
     }
   })
@@ -509,11 +506,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
   }, [children.length])
 
   useEffect(() => {
-    // 1. 如果用户在touch的过程中, 外部更新了current以外部为准（小程序表现）
-    // 2. 手指滑动过程中更新索引，外部会把current再穿进来，导致offset直接更新了
-    if (props.current !== currentIndex.value) {
-      updateCurrent(props.current || 0, step.value)
-    }
+    updateCurrent(props.current || 0, step.value)
   }, [props.current])
 
   useEffect(() => {
@@ -575,25 +568,18 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         targetOffset: -moveToTargetPos
       }
     }
-    function checkUnCircular (eventData: EventDataType) {
+    function canMove (eventData: EventDataType) {
       'worklet'
       const { translation } = eventData
       const currentOffset = Math.abs(offset.value)
-      // 向右滑动swiper
-      if (translation < 0) {
-        const boundaryOffset = step.value * (childrenLength.value - 1)
-        const gestureMovePos = Math.abs(translation) + currentOffset
-        return {
-          // 防止快速连续向右滑动时，手势移动的距离 加 当前的offset超出边界
-          targetOffset: gestureMovePos > boundaryOffset ? -boundaryOffset : offset.value + translation,
-          canMove: currentOffset < boundaryOffset
+      if (!circularShared.value) {
+        if (translation < 0) {
+          return currentOffset < step.value * (childrenLength.value - 1)
+        } else {
+          return currentOffset > 0
         }
       } else {
-        const gestureMovePos = currentOffset - translation
-        return {
-          targetOffset: gestureMovePos < 0 ? 0 : offset.value + translation,
-          canMove: currentOffset > 0
-        }
+        return true
       }
     }
     function handleEnd (eventData: EventDataType) {
@@ -652,7 +638,7 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         }
       })
     }
-    function computeHalf () {
+    function handleLongPress () {
       'worklet'
       const currentOffset = Math.abs(offset.value)
       let preOffset = (currentIndex.value + patchElmNumShared.value) * step.value
@@ -662,14 +648,6 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
       // 正常事件中拿到的transition值(正向滑动<0，倒着滑>0)
       const diffOffset = preOffset - currentOffset
       const half = Math.abs(diffOffset) > step.value / 2
-      return {
-        diffOffset,
-        half
-      }
-    }
-    function handleLongPress () {
-      'worklet'
-      const { diffOffset, half } = computeHalf()
       if (+diffOffset === 0) {
         runOnJS(resumeLoop)()
       } else if (half) {
@@ -725,29 +703,18 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         runOnJS(pauseLoop)()
         preAbsolutePos.value = e[strAbso]
         moveTranstion.value = e[strAbso]
-        anotherDirectionMove.value = e[anotherAbso]
         moveTime.value = new Date().getTime()
       })
-      .onUpdate((e) => {
+      .onTouchesMove((e) => {
         'worklet'
         if (touchfinish.value) return
-        const moveDistance = e[strAbso] - preAbsolutePos.value
+        const touchEventData = e.changedTouches[0]
+        const moveDistance = touchEventData[strAbso] - preAbsolutePos.value
         const eventData = {
           translation: moveDistance
         }
-        // 1. 在Move过程中，如果手指一直没抬起来，超过一半的话也会更新索引
-        const { half } = computeHalf()
-        if (half) {
-          const { selectedIndex } = getTargetPosition(eventData)
-          currentIndex.value = selectedIndex
-        }
-        // 2. 处理用户一直拖拽到临界点的场景, 不会执行onEnd
-        const { canMove, targetOffset } = checkUnCircular(eventData)
-        if (!circularShared.value) {
-          if (canMove) {
-            offset.value = targetOffset
-            preAbsolutePos.value = e[strAbso]
-          }
+        // 处理用户一直拖拽到临界点的场景, 不会执行onEnd
+        if (!circularShared.value && !canMove(eventData)) {
           return
         }
         const { isBoundary, resetOffset } = reachBoundary(eventData)
@@ -756,21 +723,28 @@ const SwiperWrapper = forwardRef<HandlerRef<View, SwiperProps>, SwiperProps>((pr
         } else {
           offset.value = moveDistance + offset.value
         }
-        preAbsolutePos.value = e[strAbso]
+        preAbsolutePos.value = touchEventData[strAbso]
       })
-      .onFinalize((e) => {
+      .onTouchesUp((e) => {
         'worklet'
         if (touchfinish.value) return
-        const moveDistance = e[strAbso] - moveTranstion.value
+        const touchEventData = e.changedTouches[0]
+        const moveDistance = touchEventData[strAbso] - moveTranstion.value
         touchfinish.value = true
         const eventData = {
           translation: moveDistance
         }
+        if (childrenLength.value === 1) {
+          return handleBackInit()
+        }
+        // 用户手指按下起来, 需要计算正确的位置, 比如在滑动过程中突然按下然后起来,需要计算到正确的位置
+        if (!circularShared.value && !canMove(eventData)) {
+          return
+        }
         const strVelocity = moveDistance / (new Date().getTime() - moveTime.value) * 1000
         if (Math.abs(strVelocity) < longPressRatio) {
           handleLongPress()
         } else {
-          // 如果触发了onTouchesCancelled，不会触发onUpdate不会更新offset值, 索引不会变更
           handleEnd(eventData)
         }
       })

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

@@ -1,6 +1,7 @@
-import { forwardRef, useRef, useContext, useMemo, useState, useCallback, useEffect } from 'react'
+import { forwardRef, useRef, useContext, useMemo, useState } from 'react'
 import { warn, isFunction } from '@mpxjs/utils'
 import Portal from './mpx-portal/index'
+import { usePreventRemove, PreventRemoveEvent } from '@react-navigation/native'
 import { getCustomEvent } from './getInnerListeners'
 import { promisify, redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy'
 import { WebView } from 'react-native-webview'
@@ -75,7 +76,6 @@ const styles = StyleSheet.create({
     borderRadius: 10
   }
 })
-
 const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((props, ref): JSX.Element | null => {
   const { src, bindmessage, bindload, binderror } = props
   const mpx = global.__mpx
@@ -100,8 +100,8 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
   const webViewRef = useRef<WebView>(null)
   const fristLoaded = useRef<boolean>(false)
   const isLoadError = useRef<boolean>(false)
+  const isNavigateBack = useRef<boolean>(false)
   const statusCode = useRef<string|number>('')
-  const [isLoaded, setIsLoaded] = useState<boolean>(true)
   const defaultWebViewStyle = {
     position: 'absolute' as const,
     left: 0,
@@ -109,30 +109,18 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
     top: 0,
     bottom: 0
   }
-  const canGoBack = useRef<boolean>(false)
-  const isNavigateBack = useRef<boolean>(false)
 
-  const beforeRemoveHandle = (e: Event) => {
-    if (canGoBack.current && !isNavigateBack.current) {
+  const navigation = useNavigation()
+  const [isIntercept, setIsIntercept] = useState<boolean>(false)
+  usePreventRemove(isIntercept, (event: PreventRemoveEvent) => {
+    const { data } = event
+    if (isNavigateBack.current) {
+      navigation?.dispatch(data.action)
+    } else {
       webViewRef.current?.goBack()
-      e.preventDefault()
     }
     isNavigateBack.current = false
-  }
-
-  const navigation = useNavigation()
-
-  // 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
@@ -183,14 +171,14 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
   }
   const _changeUrl = function (navState: WebViewNavigation) {
     if (navState.navigationType) { // navigationType这个事件在页面开始加载时和页面加载完成时都会被触发所以判断这个避免其他无效触发执行该逻辑
-      canGoBack.current = navState.canGoBack
       currentPage.__webViewUrl = navState.url
+      setIsIntercept(navState.canGoBack)
     }
   }
 
   const _onLoadProgress = function (event: WebViewProgressEvent) {
     if (__mpx_mode__ !== 'ios') {
-      canGoBack.current = event.nativeEvent.canGoBack
+      setIsIntercept(event.nativeEvent.canGoBack)
     }
   }
   const _message = function (res: WebViewMessageEvent) {
@@ -279,7 +267,6 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
   }
   const onLoadEndHandle = function (res: WebViewEvent) {
     fristLoaded.current = true
-    setIsLoaded(true)
     const src = res.nativeEvent?.url
     if (isLoadError.current) {
       isLoadError.current = false
@@ -325,11 +312,6 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
       setPageLoadErr(true)
     }
   }
-  const onLoadStart = function () {
-    if (!fristLoaded.current) {
-      setIsLoaded(false)
-    }
-  }
 
   return (
       <Portal>
@@ -342,7 +324,6 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
             )
           : (<WebView
             style={ defaultWebViewStyle }
-            pointerEvents={ isLoaded ? 'auto' : 'none' }
             source={{ uri: src }}
             ref={webViewRef}
             javaScriptEnabled={true}
@@ -353,7 +334,6 @@ const _WebView = forwardRef<HandlerRef<WebView, WebViewProps>, WebViewProps>((pr
             onLoadEnd={onLoadEnd}
             onHttpError={onHttpError}
             onError={onError}
-            onLoadStart={onLoadStart}
             allowsBackForwardNavigationGestures={true}
       ></WebView>)}
       </Portal>