Fix actionsheet 0106

packages/api-proxy/@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']

packages/api-proxy/src/platform/api/action-sheet/rnActionSheet.jsx

@@ -1,14 +1,22 @@
-import { View, TouchableHighlight, Text, StyleSheet, TouchableOpacity } from 'react-native'
+import { View, Text, StyleSheet } from 'react-native'
 import { successHandle, failHandle } from '../../../common/js'
-import { Portal } from '@ant-design/react-native'
+import Portal from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-portal'
 import { getWindowInfo } from '../system/rnSystem'
 import Animated, {
   useSharedValue,
   useAnimatedStyle,
   withTiming
 } from 'react-native-reanimated'
+
 function showActionSheet (options = {}) {
   const { alertText, itemList = [], itemColor = '#000000', success, fail, complete } = options
+  if (itemList.length > 6) {
+    const result = {
+      errMsg: 'showActionSheet:fail parameter error: itemList should not be large than 6'
+    }
+    failHandle(result, fail, complete)
+    return
+  }
   const windowInfo = getWindowInfo()
   const bottom = windowInfo.screenHeight - windowInfo.safeArea.bottom
   let actionSheetKey = null
@@ -64,7 +72,8 @@ function showActionSheet (options = {}) {
 
     offset.value = withTiming(0)
 
-    const selectAction = function (index) {
+    const selectAction = function (index, e) {
+      e.stopPropagation()
       const result = {
         errMsg: 'showActionSheet:ok',
         tapIndex: index
@@ -76,32 +85,35 @@ function showActionSheet (options = {}) {
     const remove = function () {
       if (actionSheetKey) {
         slideOut()
+        Portal.remove(actionSheetKey)
+        actionSheetKey = null
         setTimeout(() => {
           Portal.remove(actionSheetKey)
           actionSheetKey = null
         }, 200)
       }
     }
 
-    const cancelAction = function () {
+    const cancelAction = function (e) {
+      e.stopPropagation()
       const result = {
         errMsg: 'showActionSheet:fail cancel'
       }
       failHandle(result, fail, complete)
       remove()
     }
     return (
-      <TouchableHighlight underlayColor="rgba(0,0,0,0.6)" activeOpacity={1} onPress={cancelAction} style={styles.actionActionMask}>
-        <Animated.View style={[styles.actionSheetContent, animatedStyles]} >
+      <View onTouchEnd={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 ? {
+          { itemList.map((item, index) => <View key={index} onTouchEnd={(e) => selectAction(index, e)} 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>
+          } : {}] }><Text style={[styles.itemTextStyle, { color: itemColor }]}>{item}</Text></View>) }
+          <View style={styles.buttonStyle} onTouchEnd={cancelAction}><Text style={{ color: "#000000", width: "100%", textAlign: "center" }}>取消</Text></View>
         </Animated.View>
-      </TouchableHighlight>
+      </View>
     )
   }
 

packages/api-proxy/src/platform/api/modal/rnModal.jsx

@@ -1,6 +1,6 @@
 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 Portal from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-portal'
 const { width, height } = Dimensions.get('window')
 const showModal = function (options = {}) {
   const {

packages/api-proxy/src/platform/api/route/index.ios.js

@@ -34,26 +34,38 @@ function resolvePath (relative, base) {
   return stack.join('/')
 }
 
+let toPending = false
 function navigateTo (options = {}) {
-  const navigation = Object.values(global.__mpxPagesMap || {})[0]?.[1]
+  if (toPending) {
+    return
+  }
+  toPending = true
   const navigationHelper = global.__navigationHelper
+  const navigation = Object.values(global.__mpxPagesMap || {})[0]?.[1]
   if (navigation && navigationHelper) {
     const { path, queryObj } = parseUrl(options.url)
     const basePath = getBasePath(navigation)
     const finalPath = resolvePath(path, basePath).slice(1)
     navigation.push(finalPath, queryObj)
     navigationHelper.lastSuccessCallback = () => {
+      toPending = false
       const res = { errMsg: 'navigateTo:ok' }
       successHandle(res, options.success, options.complete)
     }
     navigationHelper.lastFailCallback = (msg) => {
+      toPending = false
       const res = { errMsg: `navigateTo:fail ${msg}` }
       failHandle(res, options.fail, options.complete)
     }
   }
 }
 
+let redirectPending = false
 function redirectTo (options = {}) {
+  if (redirectPending) {
+    return
+  }
+  redirectPending = true
   const navigation = Object.values(global.__mpxPagesMap || {})[0]?.[1]
   const navigationHelper = global.__navigationHelper
   if (navigation && navigationHelper) {
@@ -62,42 +74,57 @@ function redirectTo (options = {}) {
     const finalPath = resolvePath(path, basePath).slice(1)
     navigation.replace(finalPath, queryObj)
     navigationHelper.lastSuccessCallback = () => {
+      redirectPending = false
       const res = { errMsg: 'redirectTo:ok' }
       successHandle(res, options.success, options.complete)
     }
     navigationHelper.lastFailCallback = (msg) => {
+      redirectPending = false
       const res = { errMsg: `redirectTo:fail ${msg}` }
       failHandle(res, options.fail, options.complete)
     }
   }
 }
 
+let backPending = false
 function navigateBack (options = {}) {
+  if (backPending) {
+    return
+  }
+  backPending = true
   const navigation = Object.values(global.__mpxPagesMap || {})[0]?.[1]
   const navigationHelper = global.__navigationHelper
   if (navigation && navigationHelper) {
     const delta = options.delta || 1
     const routeLength = navigation.getState().routes.length
     if (delta >= routeLength && global.__mpx?.config.rnConfig.onAppBack?.(delta - routeLength + 1)) {
       nextTick(() => {
+        backPending = false
         const res = { errMsg: 'navigateBack:ok' }
         successHandle(res, options.success, options.complete)
       })
     } else {
       navigation.pop(delta)
       navigationHelper.lastSuccessCallback = () => {
+        backPending = false
         const res = { errMsg: 'navigateBack:ok' }
         successHandle(res, options.success, options.complete)
       }
       navigationHelper.lastFailCallback = (msg) => {
+        backPending = false
         const res = { errMsg: `navigateBack:fail ${msg}` }
         failHandle(res, options.fail, options.complete)
       }
     }
   }
 }
 
+let reLaunchPending = false
 function reLaunch (options = {}) {
+  if (reLaunchPending) {
+    return
+  }
+  reLaunchPending = true
   const navigation = Object.values(global.__mpxPagesMap || {})[0]?.[1]
   const navigationHelper = global.__navigationHelper
   if (navigation && navigationHelper) {
@@ -114,10 +141,12 @@ function reLaunch (options = {}) {
       ]
     })
     navigationHelper.lastSuccessCallback = () => {
+      reLaunchPending = false
       const res = { errMsg: 'redirectTo:ok' }
       successHandle(res, options.success, options.complete)
     }
     navigationHelper.lastFailCallback = (msg) => {
+      reLaunchPending = false
       const res = { errMsg: `redirectTo:fail ${msg}` }
       failHandle(res, options.fail, options.complete)
     }

packages/api-proxy/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 || {}

packages/api-proxy/src/platform/api/toast/rnToast.jsx

@@ -1,12 +1,12 @@
 import { View, Text, Image, StyleSheet, ActivityIndicator, Dimensions } from 'react-native'
 import { successHandle, failHandle } from '../../../common/js'
-import { Portal } from '@ant-design/react-native'
+import Portal from '@mpxjs/webpack-plugin/lib/runtime/components/react/dist/mpx-portal'
 
 let toastKey
 let isLoadingShow
 const dimensionsScreen = Dimensions.get('screen')
 const screenHeight = dimensionsScreen.height
-const contentTop = parseInt(screenHeight * 0.35)
+const contentTop = parseInt(screenHeight * 0.4)
 let tId // show duration 计时id
 const styles = StyleSheet.create({
   toastContent: {

packages/webpack-plugin/lib/react/processScript.js

@@ -26,7 +26,7 @@ module.exports = function (script, {
 import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
 import { NavigationContainer, StackActions } from '@react-navigation/native'
 import { createStackNavigator } from '@react-navigation/stack'
-import { Provider } from '@ant-design/react-native'
+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'