@mpxjs/api-proxy 2.9.71 → 2.10.0

package/@types/index.d.ts

@@ -98,6 +98,7 @@ export const clearStorage: WechatMiniprogram.Wx['clearStorage']
 export const clearStorageSync: WechatMiniprogram.Wx['clearStorageSync']
 export const getSystemInfo: WechatMiniprogram.Wx['getSystemInfo']
 export const getSystemInfoSync: WechatMiniprogram.Wx['getSystemInfoSync']
+export const getWindowInfo: WechatMiniprogram.Wx['getWindowInfo']
 export const setTabBarItem: WechatMiniprogram.Wx['setTabBarItem']
 export const setTabBarStyle: WechatMiniprogram.Wx['setTabBarStyle']
 export const showTabBar: WechatMiniprogram.Wx['showTabBar']

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/api-proxy",
-  "version": "2.9.71",
+  "version": "2.10.0",
   "description": "convert miniprogram API at each end",
   "module": "src/index.js",
   "types": "@types/index.d.ts",
@@ -37,11 +37,10 @@
   },
   "homepage": "https://github.com/didi/mpx#readme",
   "dependencies": {
-    "@mpxjs/utils": "^2.9.70",
+    "@mpxjs/utils": "^2.10.0",
     "axios": "^1.7.3"
   },
   "peerDependencies": {
-    "@ant-design/react-native": "^5.1.3",
     "@react-native-async-storage/async-storage": "^1.23.1",
     "@react-native-community/netinfo": "^11.2.1",
     "react-native-device-info": "^10.13.2",
@@ -65,12 +64,9 @@
     "react-native-get-location": {
       "optional": true
     },
-    "@ant-design/react-native": {
-      "optional": true
-    },
     "react-native-haptic-feedback": {
       "optional": true
     }
   },
-  "gitHead": "38446f301a17e78dbe3ca7dacd771c79eb7a8ede"
+  "gitHead": "d9f3e76c6367341e4fc168b37f063c41f7321a7c"
 }

package/src/common/js/promisify.js

@@ -14,24 +14,37 @@ const blackList = [
   'stopBackgroundAudio',
   'showNavigationBarLoading',
   'hideNavigationBarLoading',
-  'createAnimation',
-  'createAnimationVideo',
-  'createSelectorQuery',
-  'createIntersectionObserver',
   'getPerformance',
   'hideKeyboard',
   'stopPullDownRefresh',
-  'createWorker',
   'pageScrollTo',
   'reportAnalytics',
   'getMenuButtonBoundingClientRect',
   'reportMonitor',
-  'createOffscreenCanvas',
   'reportEvent',
   'connectSocket',
   'base64ToArrayBuffer',
+  'arrayBufferToBase64',
   'getDeviceInfo',
-  'getWindowInfo'
+  'getWindowInfo',
+  'getAppBaseInfo',
+  'getAppAuthorizeSetting',
+  'getApiCategory',
+  'postMessageToReferrerPage',
+  'postMessageToReferrerMiniProgram',
+  'reportPerformance',
+  'getPerformance',
+  'preDownloadSubpackage',
+  'router',
+  'nextTick',
+  'checkIsPictureInPictureActive',
+  'worklet',
+  'revokeBufferURL',
+  'reportEvent',
+  'getExptInfoSync',
+  'reserveChannelsLive',
+  'getNFCAdapter',
+  'isVKSupport'
 ]
 
 function getMapFromList (list) {
@@ -55,7 +68,7 @@ function promisify (listObj, whiteList, customBlackList) {
     } else {
       return !(blackListMap[key] || // 特别指定的方法
         /^get\w*Manager$/.test(key) || // 获取manager的api
-        /^create\w*Context$/.test(key) || // 创建上下文相关api
+        /^create(?!BLEConnection|BLEPeripheralServer)\w*$/.test(key) || // 创建上下文相关api
         /^(on|off)/.test(key) || // 以 on* 或 off开头的方法
         /\w+Sync$/.test(key) // 以Sync结尾的方法
       )

package/src/common/js/utils.js

@@ -1,4 +1,5 @@
 import { hasOwn, noop, getEnvObj, getFocusedNavigation } from '@mpxjs/utils'
+import { getCurrentInstance } from '@mpxjs/core'
 
 /**
  *
@@ -87,6 +88,12 @@ function failHandle (result, fail, complete) {
   typeof complete === 'function' && complete(result)
 }
 
+function getCurrentPageId () {
+  const currentInstance = getCurrentInstance()
+  const id = currentInstance?.getPageId() || getFocusedNavigation()?.pageId || null
+  return id
+}
+
 const ENV_OBJ = getEnvObj()
 
 export {
@@ -101,5 +108,6 @@ export {
   defineUnsupportedProps,
   successHandle,
   failHandle,
-  getFocusedNavigation
+  getFocusedNavigation,
+  getCurrentPageId
 }

package/src/platform/api/action-sheet/rnActionSheet.jsx

@@ -1,111 +1,169 @@
-import { View, TouchableHighlight, Text, StyleSheet, TouchableOpacity } from 'react-native'
-import { successHandle, failHandle } from '../../../common/js'
-import { Portal } from '@ant-design/react-native'
+import { useEffect } from 'react'
+import { View, Text, StyleSheet } from 'react-native'
+import { successHandle, failHandle, getCurrentPageId } from '../../../common/js'
+import Portal from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-portal/index'
 import { getWindowInfo } from '../system/rnSystem'
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
-  withTiming
+  withTiming,
+  Easing,
+  runOnJS
 } from 'react-native-reanimated'
-function showActionSheet (options = {}) {
-  const { alertText, itemList = [], itemColor = '#000000', success, fail, complete } = options
-  const windowInfo = getWindowInfo()
-  const bottom = windowInfo.screenHeight - windowInfo.safeArea.bottom
-  let actionSheetKey = null
-  const styles = StyleSheet.create({
-    actionActionMask: {
-      left: 0,
-      top: 0,
-      bottom: 0,
-      right: 0,
-      backgroundColor: 'rgba(0,0,0,0.6)',
-      position: 'absolute',
-      zIndex: 1000
-    },
-    actionSheetContent: {
-      backgroundColor: '#ffffff',
-      borderTopLeftRadius: 10,
-      borderTopRightRadius: 10,
-      position: 'absolute',
-      bottom: 0,
-      left: 0,
-      right: 0,
-      paddingBottom: bottom
-    },
-    itemStyle: {
-      paddingTop: 15,
-      paddingBottom: 15,
-      justifyContent: 'center',
-      alignItems: 'center',
-      borderBottomWidth: 1,
-      borderBottomStyle: 'solid',
-      borderBottomColor: 'rgba(0,0,0,0.1)'
-    },
-    itemTextStyle: {
-      fontSize: 18
-    },
-    buttonStyle: {
-      fontSize: 18,
-      paddingTop: 10,
-      paddingBottom: 10
-    }
-  })
-  function ActionSheet () {
-    const offset = useSharedValue(1000);
+const actionSheetMap = new Map()
+
+const remove = function (id) {
+  if (actionSheetMap.get(id)) { // 页面维度判断是否要清除之前渲染的actionsheet
+    Portal.remove(actionSheetMap.get(id))
+    actionSheetMap.delete(id)
+  }
+}
 
-    const animatedStyles = useAnimatedStyle(() => ({
-      transform: [{ translateY: offset.value }],
-    }))
+const windowInfo = getWindowInfo()
+const bottom = windowInfo.screenHeight - windowInfo.safeArea.bottom
 
-    const slideOut = () => {
-      // Will change fadeAnim value to 1 in 5 seconds
-      offset.value = withTiming(1000)
-    }
+const styles = StyleSheet.create({
+  actionAction: {
+    left: 0,
+    top: 0,
+    bottom: 0,
+    right: 0,
+    position: 'absolute',
+    zIndex: 1000
+  },
+  maskWrap: {
+    left: 0,
+    top: 0,
+    bottom: 0,
+    right: 0,
+    position: 'absolute'
+  },
+  actionActionMask: {
+    left: 0,
+    top: 0,
+    bottom: 0,
+    right: 0,
+    backgroundColor: 'rgba(0,0,0,0.6)',
+    position: 'absolute'
+  },
+  actionSheetContent: {
+    backgroundColor: '#ffffff',
+    borderTopLeftRadius: 10,
+    borderTopRightRadius: 10,
+    position: 'absolute',
+    bottom: 0,
+    left: 0,
+    right: 0,
+    paddingBottom: bottom
+  },
+  itemStyle: {
+    paddingTop: 15,
+    paddingBottom: 15,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderBottomWidth: 1,
+    borderBottomStyle: 'solid',
+    borderBottomColor: 'rgba(0,0,0,0.1)'
+  },
+  itemTextStyle: {
+    fontSize: 18,
+    height: 22,
+    lineHeight: 22
+  },
+  buttonStyle: {
+    paddingTop: 10,
+    paddingBottom: 10,
+    justifyContent: 'center',
+    alignItems: 'center'
+  }
+})
 
-    offset.value = withTiming(0)
+function ActionSheet ({itemColor, height, success, fail, complete, alertText, itemList}) {
+  const slide = useSharedValue(height)
+  const fade = useSharedValue(0)
 
-    const selectAction = function (index) {
-      const result = {
-        errMsg: 'showActionSheet:ok',
-        tapIndex: index
-      }
-      successHandle(result, success, complete)
-      remove()
+  const actionAnimatedStyles = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateY: slide.value }]
     }
-
-    const remove = function () {
-      if (actionSheetKey) {
-        slideOut()
-        setTimeout(() => {
-          Portal.remove(actionSheetKey)
-          actionSheetKey = null
-        }, 200)
-      }
+  })
+  const maskAnimatedStyles = useAnimatedStyle(() => {
+    return {
+      opacity: fade.value
     }
+  })
 
-    const cancelAction = function () {
-      const result = {
-        errMsg: 'showActionSheet:fail cancel'
-      }
-      failHandle(result, fail, complete)
-      remove()
+  useEffect(() => {
+    fade.value = withTiming(1, {
+      easing: Easing.inOut(Easing.poly(3)),
+      duration: 250
+    })
+    slide.value = withTiming(0, {
+      easing: Easing.out(Easing.poly(3)),
+      duration: 250
+    })
+  }, [])
+
+  const removeActionSheet = function () {
+    const id = getCurrentPageId()
+    remove(id)
+  }
+
+  const selectAction = function (index) {
+    removeActionSheet()
+    const result = {
+      errMsg: 'showActionSheet:ok',
+      tapIndex: index
+    }
+    successHandle(result, success, complete)
+  }
+  const cancelAction = function () {
+    removeActionSheet()
+    const result = {
+      errMsg: 'showActionSheet:fail cancel'
+    }
+    failHandle(result, fail, complete)
+  }
+  return (
+    <View style={styles.actionAction}>
+      <Animated.View style={[styles.maskWrap, maskAnimatedStyles]}>
+        <View activeOpacity={1} style={styles.actionActionMask} onTouchEnd={cancelAction}></View>
+      </Animated.View>
+      <Animated.View style={[styles.actionSheetContent, actionAnimatedStyles]}>
+        { alertText ? <View style={ styles.itemStyle }><Text style={[styles.itemTextStyle, { color: '#666666' }]}>{alertText}</Text></View> : null }
+        { itemList.map((item, index) => <View onTouchEnd={() => selectAction(index)} key={index} style={ [styles.itemStyle, itemList.length -1 === index ? {
+          borderBottomWidth: 6,
+          borderBottomStyle: 'solid',
+          borderBottomColor: '#f7f7f7'
+        } : {}] }><Text style={[styles.itemTextStyle, { color: itemColor }]}>{item}</Text></View>) }
+        <View style={styles.buttonStyle} onTouchEnd={cancelAction}><Text style={{ color: "#000000", fontSize: 18, lineHeight: 22, height: 22, width: "100%", textAlign: "center" }}>取消</Text></View>
+      </Animated.View>
+    </View>
+  )
+}
+function showActionSheet (options = {}) {
+  const id = getCurrentPageId()
+  remove(id)
+  const { alertText, itemList = [], itemColor = '#000000', success, fail, complete } = options
+  if (id === null) {
+    const result = {
+      errMsg: 'showActionSheet:fail cannot be invoked outside the mpx life cycle in React Native environments'
+    }
+    failHandle(result, fail, complete)
+    return
+  }
+  const len = itemList.length
+  if (len > 6) {
+    const result = {
+      errMsg: 'showActionSheet:fail parameter error: itemList should not be large than 6'
     }
-    return (
-      <TouchableHighlight underlayColor="rgba(0,0,0,0.6)" activeOpacity={1} onPress={cancelAction} style={styles.actionActionMask}>
-        <Animated.View style={[styles.actionSheetContent, animatedStyles]} >
-          { alertText ? <View style={ styles.itemStyle }><Text style={[styles.itemTextStyle, { color: '#666666' }]}>{alertText}</Text></View> : null }
-          { itemList.map((item, index) => <TouchableHighlight key={index} underlayColor="#ececec" onPress={() => selectAction(index)} style={ [styles.itemStyle, itemList.length -1 === index ? {
-            borderBottomWidth: 6,
-            borderBottomStyle: 'solid',
-            borderBottomColor: '#f7f7f7'
-          } : {}] }><Text style={[styles.itemTextStyle, { color: itemColor }]}>{item}</Text></TouchableHighlight>) }
-          <View style={styles.buttonStyle}><TouchableOpacity onPress={cancelAction}><Text style={{ color: "#000000", width: "100%", textAlign: "center" }}>取消</Text></TouchableOpacity></View>
-        </Animated.View>
-      </TouchableHighlight>
-    )
+    failHandle(result, fail, complete)
+    return
   }
+  const height = len * 53 + 46 + bottom + (alertText ? 52 : 0)
   
-  actionSheetKey = Portal.add(<ActionSheet/>)
+  const actionSheetKey = Portal.add(<ActionSheet itemColor={itemColor} height={height} success={success} fail={fail} complete={complete} alertText={alertText} itemList={itemList} />, id)
+  actionSheetMap.set(id, actionSheetKey)
 }
 
 export {

package/src/platform/api/create-intersection-observer/rnIntersectionObserver.js

@@ -1,8 +1,7 @@
-import { isArray, isObject, isString, noop } from '@mpxjs/utils'
+import { isArray, isObject, isString, noop, warn } from '@mpxjs/utils'
 import throttle from 'lodash/throttle'
 import { Dimensions } from 'react-native'
 import { getFocusedNavigation } from '../../../common/js'
-
 const WindowRefStr = 'window'
 const IgnoreTarget = 'ignore'
 const DefaultMargin = { top: 0, bottom: 0, left: 0, right: 0 }
@@ -12,13 +11,19 @@ class RNIntersectionObserver {
   constructor (component, options, intersectionCtx) {
     this.id = idCount++
     this.component = component
-    this.options = options
-    this.thresholds = options.thresholds.sort((a, b) => a - b) || [0]
-    this.initialRatio = options.initialRatio || 0
-    this.observeAll = options.observeAll || false
+    this.mpxFileResource = component.__mpxProxy?.options?.mpxFileResource || ''
+    this.options = Object.assign({
+      thresholds: [0],
+      initialRatio: 0,
+      observeAll: false,
+      throttleTime: 100
+    }, options || {})
+    this.thresholds = this.options.thresholds.sort((a, b) => a - b)
+    this.initialRatio = this.options.initialRatio
+    this.observeAll = this.options.observeAll
 
     // 组件上挂载对应的observers，用于在组件销毁的时候进行批量disconnect
-    this.component._intersectionObservers = this.component.__intersectionObservers || []
+    this.component._intersectionObservers = this.component._intersectionObservers || []
     this.component._intersectionObservers.push(this)
 
     this.observerRefs = null
@@ -26,7 +31,7 @@ class RNIntersectionObserver {
     this.margins = DefaultMargin
     this.callback = noop
 
-    this.throttleMeasure = this.getThrottleMeasure(options.throttleTime || 100)
+    this.throttleMeasure = this.getThrottleMeasure(this.options.throttleTime)
 
     // 记录上一次相交的比例
     this.previousIntersectionRatio = []
@@ -52,7 +57,7 @@ class RNIntersectionObserver {
       this.relativeRef = relativeRef
       this.margins = Object.assign({}, DefaultMargin, margins)
     } else {
-      console.warn(`node ${selector}is not found. The relative node for intersection observer will be ignored`)
+      warn(`node ${selector}is not found. The relative node for intersection observer will be ignored`, this.mpxFileResource)
     }
     return this
   }
@@ -65,7 +70,7 @@ class RNIntersectionObserver {
 
   observe (selector, callback) {
     if (this.observerRefs) {
-      console.error('"observe" call can be only called once in IntersectionObserver')
+      warn('"observe" call can be only called once in IntersectionObserver', this.mpxFileResource)
       return
     }
     let targetRef = null
@@ -75,7 +80,7 @@ class RNIntersectionObserver {
       targetRef = this.component.__selectRef(selector, 'node')
     }
     if (!targetRef || targetRef.length === 0) {
-      console.error('intersection observer target not found')
+      warn('intersection observer target not found', this.mpxFileResource)
       return
     }
     this.observerRefs = isArray(targetRef) ? targetRef : [targetRef]
@@ -95,10 +100,10 @@ class RNIntersectionObserver {
     }
 
     const windowRect = {
-      top: navigationLayout.y + this.margins.top,
-      left: this.margins.left,
-      right: navigationLayout.width - this.margins.right,
-      bottom: navigationLayout.y + navigationLayout.height - this.margins.bottom
+      top: navigationLayout.y - this.margins.top,
+      left: 0 - this.margins.left,
+      right: navigationLayout.width + this.margins.right,
+      bottom: navigationLayout.y + navigationLayout.height + this.margins.bottom
     }
 
     this.windowRect = windowRect
@@ -227,7 +232,7 @@ class RNIntersectionObserver {
         }
       })
     }).catch((e) => {
-      console.log('_measureTarget fail', e)
+      warn('_measureTarget fail', this.mpxFileResource, e)
     })
   }
 

package/src/platform/api/modal/rnModal.jsx

@@ -1,8 +1,10 @@
 import { View, Dimensions, Text, StyleSheet, TouchableOpacity, ScrollView, TextInput } from 'react-native'
-import { successHandle, failHandle } from '../../../common/js'
-import { Portal } from '@ant-design/react-native'
+import { successHandle, failHandle, getCurrentPageId } from '../../../common/js'
+import Portal from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-portal/index'
 const { width, height } = Dimensions.get('window')
+const modalMap = new Map()
 const showModal = function (options = {}) {
+  const id = getCurrentPageId()
   const {
     title,
     content,
@@ -17,6 +19,23 @@ const showModal = function (options = {}) {
     fail,
     complete
   } = options
+  if (id === null) {
+    const result = {
+      errMsg: 'showModal:fail cannot be invoked outside the mpx life cycle in React Native environments'
+    }
+    failHandle(result, fail, complete)
+    return
+  }
+  const setCurrentModalKey = function (modalKey) {
+    const currentArr = modalMap.get(id) || []
+    currentArr.push(modalKey)
+    modalMap.set(id, currentArr)
+  }
+  const getCurrentModalKey = function () {
+    const currentArr = modalMap.get(id) || []
+    return currentArr.pop()
+  }
+
   const modalWidth = width * 0.8
   const styles = StyleSheet.create({
     modalTask: {
@@ -82,7 +101,6 @@ const showModal = function (options = {}) {
       borderStyle: 'solid',
     }
   })
-  let modalKey
   let ModalView
   let modalTitle = []
   let modalContent = []
@@ -97,8 +115,10 @@ const showModal = function (options = {}) {
     contentText = text
   }
   const closeModal = function (buttonInfo) {
-    Portal.remove(modalKey)
-    modalKey = null
+    const modalKey = getCurrentModalKey()
+    if(modalKey) {
+      Portal.remove(modalKey)
+    }
     const result = {
       errMsg: 'showModal:ok'
     }
@@ -156,7 +176,8 @@ const showModal = function (options = {}) {
     </View>
   </View>
   try {
-    modalKey = Portal.add(ModalView)
+    const modalKey = Portal.add(ModalView, id)
+    setCurrentModalKey(modalKey)
   } catch (e) {
     const result = {
       errMsg: `showModal:fail invalid ${e}`

package/src/platform/api/route/index.ios.js

@@ -33,10 +33,29 @@ function resolvePath (relative, base) {
   }
   return stack.join('/')
 }
+let timerId = null
+function isLock (navigationHelper, type, options) {
+  if (navigationHelper.lastSuccessCallback && navigationHelper.lastFailCallback) {
+    const res = { errMsg: `${type}:fail the previous routing event didn't complete` }
+    failHandle(res, options.fail, options.complete)
+    return true
+  }
+  clearTimeout(timerId)
+  timerId = setTimeout(() => {
+    if (navigationHelper.lastSuccessCallback && navigationHelper.lastFailCallback) {
+      navigationHelper.lastFailCallback('timeout')
+      navigationHelper.lastFailCallback = null
+    }
+  }, 350)
+  return false
+}
 
 function navigateTo (options = {}) {
-  const navigation = Object.values(global.__mpxPagesMap || {})[0]?.[1]
   const navigationHelper = global.__navigationHelper
+  if (isLock(navigationHelper, 'navigateTo', options)) {
+    return
+  }
+  const navigation = Object.values(global.__mpxPagesMap || {})[0]?.[1]
   if (navigation && navigationHelper) {
     const { path, queryObj } = parseUrl(options.url)
     const basePath = getBasePath(navigation)
@@ -56,6 +75,9 @@ function navigateTo (options = {}) {
 function redirectTo (options = {}) {
   const navigation = Object.values(global.__mpxPagesMap || {})[0]?.[1]
   const navigationHelper = global.__navigationHelper
+  if (isLock(navigationHelper, 'redirectTo', options)) {
+    return
+  }
   if (navigation && navigationHelper) {
     const { path, queryObj } = parseUrl(options.url)
     const basePath = getBasePath(navigation)
@@ -75,24 +97,27 @@ function redirectTo (options = {}) {
 function navigateBack (options = {}) {
   const navigation = Object.values(global.__mpxPagesMap || {})[0]?.[1]
   const navigationHelper = global.__navigationHelper
+  if (isLock(navigationHelper, 'navigateBack', options)) {
+    return
+  }
   if (navigation && navigationHelper) {
     const delta = options.delta || 1
     const routeLength = navigation.getState().routes.length
+    navigationHelper.lastSuccessCallback = () => {
+      const res = { errMsg: 'navigateBack:ok' }
+      successHandle(res, options.success, options.complete)
+    }
+    navigationHelper.lastFailCallback = (msg) => {
+      const res = { errMsg: `navigateBack:fail ${msg}` }
+      failHandle(res, options.fail, options.complete)
+    }
     if (delta >= routeLength && global.__mpx?.config.rnConfig.onAppBack?.(delta - routeLength + 1)) {
       nextTick(() => {
-        const res = { errMsg: 'navigateBack:ok' }
-        successHandle(res, options.success, options.complete)
+        navigationHelper.lastSuccessCallback()
+        navigationHelper.lastSuccessCallback = null
       })
     } else {
       navigation.pop(delta)
-      navigationHelper.lastSuccessCallback = () => {
-        const res = { errMsg: 'navigateBack:ok' }
-        successHandle(res, options.success, options.complete)
-      }
-      navigationHelper.lastFailCallback = (msg) => {
-        const res = { errMsg: `navigateBack:fail ${msg}` }
-        failHandle(res, options.fail, options.complete)
-      }
     }
   }
 }
@@ -100,6 +125,9 @@ function navigateBack (options = {}) {
 function reLaunch (options = {}) {
   const navigation = Object.values(global.__mpxPagesMap || {})[0]?.[1]
   const navigationHelper = global.__navigationHelper
+  if (isLock(navigationHelper, 'reLaunch', options)) {
+    return
+  }
   if (navigation && navigationHelper) {
     const { path, queryObj } = parseUrl(options.url)
     const basePath = getBasePath(navigation)

package/src/platform/api/system/rnSystem.js

@@ -10,6 +10,7 @@ const getWindowInfo = function () {
   const insets = Object.assign(initialWindowMetricsInset, navigationInsets)
   let safeArea = {}
   const { top = 0, bottom = 0, left = 0, right = 0 } = insets
+
   const screenHeight = __mpx_mode__ === 'ios' ? dimensionsScreen.height : dimensionsScreen.height - bottom // 解决安卓开启屏幕内三建导航安卓把安全区计算进去后产生的影响
   const screenWidth = __mpx_mode__ === 'ios' ? dimensionsScreen.width : dimensionsScreen.width - right
   const layout = navigation.layout || {}

package/src/platform/api/toast/rnToast.jsx

@@ -1,13 +1,11 @@
 import { View, Text, Image, StyleSheet, ActivityIndicator, Dimensions } from 'react-native'
-import { successHandle, failHandle } from '../../../common/js'
-import { Portal } from '@ant-design/react-native'
+import { successHandle, failHandle, getCurrentPageId } from '../../../common/js'
+import Portal from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-portal/index'
 
-let toastKey
 let isLoadingShow
 const dimensionsScreen = Dimensions.get('screen')
 const screenHeight = dimensionsScreen.height
-const contentTop = parseInt(screenHeight * 0.35)
-let tId // show duration 计时id
+const contentTop = parseInt(screenHeight * 0.4)
 const styles = StyleSheet.create({
   toastContent: {
     maxWidth: '60%',
@@ -53,9 +51,22 @@ const styles = StyleSheet.create({
     marginTop: 10
   }
 })
-
+const toastMap = new Map()
+const timerMap = new Map()
 function showToast (options = {}) {
+  const id = getCurrentPageId()
   const { title, icon = 'success', image, duration = 1500, mask = false, success, fail, complete, isLoading } = options
+  if (id === null) {
+    const result = {
+      errMsg: 'showToast:fail cannot be invoked outside the mpx life cycle in React Native environments'
+    }
+    failHandle(result, fail, complete)
+    return
+  }
+
+  const timeoutId = timerMap.get(id)
+  clearTimeout(timeoutId)
+  timerMap.delete(id)
   let ToastView
   const successPng = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFwAAABcAgMAAACegTrLAAAADFBMVEUAAAD////R0dHj4+PcME2AAAAAAXRSTlMAQObYZgAAANNJREFUSMft1FEKwkAMBNBGyBFyH4/gR8f+ehSPLtiyQ+wM2C8Rmp+WQN90N8tOZ/1/4SbbYfpp+sBVMqafgGQKs+FvkjF8GR6aj4M8NB+GT8OX5i+GT8OX4aH5MHwZHpoPw+c3fA0xGl/zYBrP92o8vwVwF3NO8tySjXmINQLAs/WX9S8bP9UGJUZSi8MAuUqsj75payPxuWn1BmrjewCCfAvA4Fmjvx8HQL4HiJEHeRmg5k2+B8gTFeRFwL7NzREB/sCKwsG7KN2VSb7XMp31i3oBatNdEForTOoAAAAASUVORK5CYII='
   const errorPng = 'data:image/png;base64,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'
@@ -65,19 +76,15 @@ function showToast (options = {}) {
   }
   const pointerEvents = mask ? 'auto' : 'none'
   isLoadingShow = isLoading
-  if (tId) {
-    clearTimeout(tId)
-  }
-  tId = null
   if (image || icon === 'success' || icon === 'error') {
-    ToastView = <View style={styles.toastWrap} pointerEvents={pointerEvents}>
+    ToastView = <View style={[styles.toastWrap, {pointerEvents}]}>
       <View style={[styles.toastContent, styles.toastHasIcon]}>
         <Image style={ styles.toastImg } source={{uri: image || iconImg[icon]}}></Image>
         { title ? <Text style={styles.toastText}>{title}</Text> : null }
       </View>
     </View>
   } else if (icon === 'loading') {
-    ToastView = <View style={styles.toastWrap} pointerEvents={pointerEvents}>
+    ToastView = <View  style={[styles.toastWrap, {pointerEvents}]}>
       <View style={[styles.toastContent, styles.toastHasIcon]}>
         <ActivityIndicator
           animating
@@ -88,7 +95,7 @@ function showToast (options = {}) {
       </View>
     </View>
   }  else  {
-    ToastView = <View style={styles.toastWrap} pointerEvents={pointerEvents}>
+    ToastView = <View style={[styles.toastWrap, {pointerEvents}]}>
       <View style={styles.toastContent}>
         { title ? <Text numberOfLines={2} style={{ ...styles.toastText, ...(icon === 'none' ? {
             height: 'auto',
@@ -98,15 +105,18 @@ function showToast (options = {}) {
     </View>
   }
   try {
-    if (toastKey) {
-      Portal.remove(toastKey)
+    if (toastMap.get(id)) { // 页面维度判断是否要清除toast
+      Portal.remove(toastMap.get(id))
+      toastMap.delete(id)
     }
-    toastKey = Portal.add(ToastView)
+    const toastKey = Portal.add(ToastView, id)
+    toastMap.set(id, toastKey)
     if (!isLoading) {
-      tId = setTimeout(() => {
-        Portal.remove(toastKey)
-        toastKey = null
+      const timeoutId = setTimeout(() => {
+        Portal.remove(toastMap.get(id))
+        toastMap.delete(id)
       }, duration)
+      timerMap.set(id, timeoutId)
     }
     const result = {
       errMsg: 'showToast:ok'
@@ -121,15 +131,16 @@ function showToast (options = {}) {
 }
 
 function hideToast(options = {}) {
+  const id = getCurrentPageId()
   const { noConflict = false, success, fail, complete } = options
 
   if (isLoadingShow && noConflict) {
     return
   }
   try {
-    if (toastKey) {
-      Portal.remove(toastKey)
-      toastKey = null
+    if (toastMap.get(id)) {
+      Portal.remove(toastMap.get(id))
+      toastMap.delete(id)
     }
     const result = {
       errMsg: 'hideToast:ok'
@@ -166,15 +177,16 @@ function showLoading (options = {}) {
 }
 
 function hideLoading (options = {}) {
+  const id = getCurrentPageId()
   const { noConflict = false, success, fail, complete } = options
   if (!isLoadingShow && noConflict) {
     return
   }
   isLoadingShow = false
   try {
-    if (toastKey) {
-      Portal.remove(toastKey)
-      toastKey = null
+    if (toastMap.get(id)) {
+      Portal.remove(toastMap.get(id))
+      toastMap.delete(id)
     }
     const result = {
       errMsg: 'hideLoading:ok'