@mpxjs/webpack-plugin 2.10.14-beta.11 → 2.10.14-beta.13

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

@@ -12,6 +12,7 @@ export type KeyboardAvoidContextValue = MutableRefObject<{
   adjustPosition: boolean
   keyboardHeight?: number
   onKeyboardShow?: () => void
+  readyToShow?: boolean
 } | null>
 
 export interface GroupValue {

package/lib/runtime/components/react/dist/context.d.ts

@@ -9,6 +9,7 @@ export type KeyboardAvoidContextValue = MutableRefObject<{
     adjustPosition: boolean;
     keyboardHeight?: number;
     onKeyboardShow?: () => void;
+    readyToShow?: boolean;
 } | null>;
 export interface GroupValue {
     [key: string]: {

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

@@ -144,7 +144,7 @@ const Input = forwardRef((props, ref) => {
     };
     const setKeyboardAvoidContext = () => {
         if (keyboardAvoid) {
-            keyboardAvoid.current = { cursorSpacing, ref: nodeRef, adjustPosition };
+            keyboardAvoid.current = { cursorSpacing, ref: nodeRef, adjustPosition, readyToShow: true };
         }
     };
     const onTouchStart = () => {

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

@@ -28,8 +28,9 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
         timerRef.current && clearTimeout(timerRef.current);
         if (keyboardAvoid?.current) {
             const inputRef = keyboardAvoid.current.ref?.current;
-            if (inputRef && inputRef.isFocused()) {
+            if (inputRef && inputRef.isFocused() && !keyboardAvoid.current.readyToShow) {
                 // 修复 Android 点击键盘收起按钮时当前 input 没触发失焦的问题
+                // keyboardAvoid.current.readyToShow = true 表示聚焦到了新的输入框，不需要手动触发失焦
                 inputRef.blur();
             }
             if (!keyboardAvoid.current.onKeyboardShow) {
@@ -48,6 +49,10 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }) => {
     useEffect(() => {
         let subscriptions = [];
         function keybaordAvoding(evt, ios = false) {
+            if (keyboardAvoid?.current?.readyToShow) {
+                // 重置标记位
+                keyboardAvoid.current.readyToShow = false;
+            }
             if (!keyboardAvoid?.current || isShow.current) {
                 return;
             }

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

@@ -203,7 +203,7 @@ function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
         else { // 数值类型      ImageStyle
             // 数值类型设置为 stretch
             imageProps.resizeMode = 'stretch';
-            if (type === 'linear' && (!layoutWidth || !layoutHeight)) {
+            if (type === 'linear' && (!layoutWidth || !layoutHeight) && isNeedLayout(preImageInfo)) {
                 // ios 上 linear 组件只要重新触发渲染，在渲染过程中外层容器 width 或者 height 被设置为 0，通过设置 % 的方式会渲染不出来，即使后面再更新为正常宽高也渲染不出来
                 // 所以 hack 手动先将 linear 宽高也设置为 0，后面再更新为正确的数值或 %。
                 dimensions = {
@@ -212,6 +212,7 @@ function backgroundSize(imageProps, preImageInfo, imageSize, layoutInfo) {
                 };
             }
             else {
+                // background-size 手动设置具体值，不会触发 onLayout，需要走这里的逻辑
                 dimensions = {
                     width: isPercent(width) ? width : +width,
                     height: isPercent(height) ? height : +height

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

@@ -283,7 +283,7 @@ const Input = forwardRef<HandlerRef<TextInput, FinalInputProps>, FinalInputProps
 
   const setKeyboardAvoidContext = () => {
     if (keyboardAvoid) {
-      keyboardAvoid.current = { cursorSpacing, ref: nodeRef, adjustPosition }
+      keyboardAvoid.current = { cursorSpacing, ref: nodeRef, adjustPosition, readyToShow: true }
     }
   }
 

package/lib/runtime/components/react/mpx-keyboard-avoiding-view.tsx

@@ -41,8 +41,9 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
 
     if (keyboardAvoid?.current) {
       const inputRef = keyboardAvoid.current.ref?.current
-      if (inputRef && inputRef.isFocused()) {
+      if (inputRef && inputRef.isFocused() && !keyboardAvoid.current.readyToShow) {
         // 修复 Android 点击键盘收起按钮时当前 input 没触发失焦的问题
+        // keyboardAvoid.current.readyToShow = true 表示聚焦到了新的输入框，不需要手动触发失焦
         inputRef.blur()
       }
       if (!keyboardAvoid.current.onKeyboardShow) {
@@ -65,6 +66,10 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
     let subscriptions: EmitterSubscription[] = []
 
     function keybaordAvoding(evt: any, ios = false) {
+      if (keyboardAvoid?.current?.readyToShow) {
+        // 重置标记位
+        keyboardAvoid.current.readyToShow = false
+      }
       if (!keyboardAvoid?.current || isShow.current) {
         return
       }

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

@@ -287,7 +287,7 @@ function backgroundSize (imageProps: ImageProps, preImageInfo: PreImageInfo, ima
     } else { // 数值类型      ImageStyle
       // 数值类型设置为 stretch
       imageProps.resizeMode = 'stretch'
-      if (type === 'linear' && (!layoutWidth || !layoutHeight)) {
+      if (type === 'linear' && (!layoutWidth || !layoutHeight) && isNeedLayout(preImageInfo)) {
         // ios 上 linear 组件只要重新触发渲染，在渲染过程中外层容器 width 或者 height 被设置为 0，通过设置 % 的方式会渲染不出来，即使后面再更新为正常宽高也渲染不出来
         // 所以 hack 手动先将 linear 宽高也设置为 0，后面再更新为正确的数值或 %。
         dimensions = {
@@ -295,6 +295,7 @@ function backgroundSize (imageProps: ImageProps, preImageInfo: PreImageInfo, ima
           height: 0
         } as { width: NumberVal, height: NumberVal }
       } else {
+        // background-size 手动设置具体值，不会触发 onLayout，需要走这里的逻辑
         dimensions = {
           width: isPercent(width) ? width : +width,
           height: isPercent(height) ? height : +height

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mpxjs/webpack-plugin",
-  "version": "2.10.14-beta.11",
+  "version": "2.10.14-beta.13",
   "description": "mpx compile core",
   "keywords": [
     "mpx"