From 147b32451eeddcea9b629bc03835468fcc4add85 Mon Sep 17 00:00:00 2001 From: lareinayanyu Date: Wed, 11 Dec 2024 16:06:42 +0800 Subject: [PATCH] =?UTF-8?q?chore:=20=E4=BC=98=E5=8C=96jsx?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../runtime/components/react/mpx-checkbox.tsx | 29 +-------- .../lib/runtime/components/react/mpx-form.tsx | 35 +++++----- .../lib/runtime/components/react/mpx-icon.tsx | 4 +- .../runtime/components/react/mpx-image.tsx | 56 ++++++++-------- .../runtime/components/react/mpx-input.tsx | 54 +++++++-------- .../runtime/components/react/mpx-label.tsx | 26 ++++---- .../components/react/mpx-movable-area.tsx | 26 +++----- .../components/react/mpx-movable-view.tsx | 65 ++++++++++++------- .../components/react/mpx-navigator.tsx | 10 +-- .../components/react/mpx-radio-group.tsx | 28 ++++---- .../runtime/components/react/mpx-radio.tsx | 44 ++++++------- .../components/react/mpx-root-portal.tsx | 8 +-- .../components/react/mpx-scroll-view.tsx | 46 ++++++------- .../runtime/components/react/mpx-switch.tsx | 34 +++++----- .../lib/runtime/components/react/mpx-text.tsx | 24 +++---- .../runtime/components/react/mpx-textarea.tsx | 21 +++--- .../lib/runtime/components/react/mpx-view.tsx | 15 ++--- .../runtime/components/react/mpx-web-view.tsx | 20 +++--- 18 files changed, 239 insertions(+), 306 deletions(-) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx index 53b796ef98..3da976c34f 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-checkbox.tsx @@ -207,35 +207,10 @@ const Checkbox = forwardRef, CheckboxProps>( } }, [checked]) - // return ( - // - // - // - // - // { - // wrapChildren( - // props, - // { - // hasVarDec, - // varContext: varContextRef.current, - // textStyle, - // textProps - // } - // ) - // } - // - // ) - return createElement( - View, - innerProps, + return createElement(View, innerProps, createElement( View, - { style: defaultStyle }, // 内部 View 的样式 + { style: defaultStyle }, createElement(Icon, { type: 'success_no_circle', size: 18, diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx index defda9083f..100a321eae 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-form.tsx @@ -5,7 +5,7 @@ * ✔ bindreset */ import { View } from 'react-native' -import { JSX, useRef, forwardRef, ReactNode, useMemo, useCallback } from 'react' +import { JSX, useRef, forwardRef, ReactNode, useMemo, createElement } from 'react' import useNodesRef, { HandlerRef } from './useNodesRef' import useInnerProps, { getCustomEvent } from './getInnerListeners' import { FormContext } from './context' @@ -102,25 +102,20 @@ const _Form = forwardRef, FormProps>((fromProps: For reset } }, []) - return ( - - - { - wrapChildren( - props, - { - hasVarDec, - varContext: varContextRef.current, - textStyle, - textProps - } - ) - } - - - ) + + return createElement(View, innerProps, createElement( + FormContext.Provider, + { value: contextValue }, + wrapChildren( + props, + { + hasVarDec, + varContext: varContextRef.current, + textStyle, + textProps + } + ) + )) }) _Form.displayName = 'MpxForm' diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-icon.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-icon.tsx index e26d89558b..d1a4edeceb 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-icon.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-icon.tsx @@ -3,7 +3,7 @@ * ✔ size * ✔ color */ -import { JSX, forwardRef, useRef } from 'react' +import { JSX, forwardRef, useRef, createElement } from 'react' import { Text, TextStyle, Image } from 'react-native' import useInnerProps from './getInnerListeners' import useNodesRef, { HandlerRef } from './useNodesRef' @@ -93,7 +93,7 @@ const Icon = forwardRef, IconProps>( } ) - return + return createElement(Image, innerProps) } ) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx index 85d815a4f7..12d83640ff 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-image.tsx @@ -10,7 +10,7 @@ * ✔ bindtap * ✔ DEFAULT_SIZE */ -import { useEffect, useMemo, useState, useRef, forwardRef } from 'react' +import { useEffect, useMemo, useState, useRef, forwardRef, createElement } from 'react' import { Image as RNImage, View, @@ -359,35 +359,31 @@ const Image = forwardRef, ImageProps>((props, re } ) - return ( - - { - isSvg - ? - : - } - + return createElement(View, innerProps, + isSvg + ? createElement(SvgCssUri, { + uri: src, + onLayout: onSvgLoad, + onError: binderror && onSvgError, + style: extendObject( + { transformOrigin: 'top left' }, + modeStyle + ) + }) + : createElement(RNImage, { + source: { uri: src }, + resizeMode: resizeMode, + onLoad: bindload && onImageLoad, + onError: binderror && onImageError, + style: extendObject( + { + transformOrigin: 'top left', + width: isCropMode ? imageWidth : '100%', + height: isCropMode ? imageHeight : '100%' + }, + isCropMode ? modeStyle : {} + ) + }) ) }) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx index e8a466affd..71196c3e13 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-input.tsx @@ -37,7 +37,7 @@ * ✘ bind:keyboardcompositionend * ✘ bind:onkeyboardheightchange */ -import { JSX, forwardRef, useMemo, useRef, useState, useContext, useEffect } from 'react' +import { JSX, forwardRef, useMemo, useRef, useState, useContext, useEffect, createElement } from 'react' import { KeyboardTypeOptions, Platform, @@ -405,7 +405,22 @@ const Input = forwardRef, FinalInputProps { ref: nodeRef, style: extendObject({}, normalStyle, layoutStyle), - allowFontScaling + allowFontScaling, + keyboardType: keyboardType, + secureTextEntry: !!password, + defaultValue: defaultValue, + value: inputValue, + maxLength: maxlength === -1 ? undefined : maxlength, + editable: !disabled, + autoFocus: !!autoFocus || !!focus, + returnKeyType: confirmType, + selection: selection, + selectionColor: cursorColor, + blurOnSubmit: !multiline && !confirmHold, + underlineColorAndroid: 'rgba(0,0,0,0)', + textAlignVertical: textAlignVertical, + placeholderTextColor: placeholderTextColor, + multiline: !!multiline }, layoutProps, { @@ -413,16 +428,17 @@ const Input = forwardRef, FinalInputProps onBlur: bindblur && onInputBlur, onKeyPress: bindconfirm && onKeyPress, onSubmitEditing: bindconfirm && multiline && onSubmitEditing, - onSelectionChange: bindselectionchange && onSelectionChange + onSelectionChange: bindselectionchange && onSelectionChange, + onTextInput: onTextInput, + onChange: onChange, + onContentSizeChange: onContentSizeChange } ), [ 'type', - 'keyboardType', 'password', 'placeholder-style', 'disabled', - 'maxlength', 'auto-focus', 'focus', 'confirm-type', @@ -430,37 +446,13 @@ const Input = forwardRef, FinalInputProps 'cursor', 'cursor-color', 'selection-start', - 'selection-end', - 'multiline' + 'selection-end' ], { layoutRef } ) - - return ( - - ) + return createElement(TextInput, innerProps) }) Input.displayName = 'MpxInput' diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-label.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-label.tsx index 4c4eb5879c..4ef3fe16ae 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-label.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-label.tsx @@ -1,7 +1,7 @@ /** * ✘ for */ -import { JSX, useRef, forwardRef, ReactNode, useCallback } from 'react' +import { JSX, useRef, forwardRef, ReactNode, useCallback, createElement } from 'react' import { View, ViewStyle, NativeSyntheticEvent } from 'react-native' import { noop, warn } from '@mpxjs/utils' import useInnerProps, { getCustomEvent } from './getInnerListeners' @@ -92,21 +92,19 @@ const Label = forwardRef, LabelProps>( } ) - return - + return createElement(View, innerProps, createElement( + LabelContext.Provider, + { value: contextRef }, + wrapChildren( + props, { - wrapChildren( - props, - { - hasVarDec, - varContext: varContextRef.current, - textStyle, - textProps - } - ) + hasVarDec, + varContext: varContextRef.current, + textStyle, + textProps } - - + ) + )) } ) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-area.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-area.tsx index b354fc3591..3e937be817 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-area.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-area.tsx @@ -3,7 +3,7 @@ */ import { View } from 'react-native' -import { JSX, forwardRef, ReactNode, useRef, useMemo } from 'react' +import { JSX, forwardRef, ReactNode, useRef, useMemo, createElement } from 'react' import useNodesRef, { HandlerRef } from './useNodesRef' import useInnerProps from './getInnerListeners' import { MovableAreaContext } from './context' @@ -51,23 +51,17 @@ const _MovableArea = forwardRef, MovableAreaP ref: movableViewRef }, layoutProps), [], { layoutRef }) - return ( - - + return createElement(MovableAreaContext.Provider, { value: contextValue }, createElement( + View, + innerProps, + wrapChildren( + props, { - wrapChildren( - props, - { - hasVarDec, - varContext: varContextRef.current - } - ) + hasVarDec, + varContext: varContextRef.current } - - - ) + ) + )) }) _MovableArea.displayName = 'MpxMovableArea' diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-view.tsx index a5b29a9a37..0243b04c68 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-view.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-movable-view.tsx @@ -17,12 +17,12 @@ * ✔ htouchmove * ✔ vtouchmove */ -import { useEffect, forwardRef, ReactNode, useContext, useCallback, useRef, useMemo } from 'react' +import { useEffect, forwardRef, ReactNode, useContext, useCallback, useRef, useMemo, createElement } from 'react' import { StyleSheet, NativeSyntheticEvent, View, LayoutChangeEvent } from 'react-native' import { getCustomEvent } from './getInnerListeners' import useNodesRef, { HandlerRef } from './useNodesRef' import { MovableAreaContext } from './context' -import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, GestureHandler, flatGesture } from './utils' +import { useTransformStyle, splitProps, splitStyle, HIDDEN_STYLE, wrapChildren, GestureHandler, flatGesture, extendObject } from './utils' import { GestureDetector, Gesture, GestureTouchEvent, GestureStateChangeEvent, PanGestureHandlerEventPayload, PanGesture } from 'react-native-gesture-handler' import Animated, { useSharedValue, @@ -518,28 +518,45 @@ const _MovableView = forwardRef, MovableViewP const catchEventHandlers = injectCatchEvent(props) const layoutStyle = !hasLayoutRef.current && hasSelfPercent ? HIDDEN_STYLE : {} - return ( - - - { - wrapChildren( - props, - { - hasVarDec, - varContext: varContextRef.current, - textStyle, - textProps - } - ) - } - - - ) + // return ( + // + // + // { + // wrapChildren( + // props, + // { + // hasVarDec, + // varContext: varContextRef.current, + // textStyle, + // textProps + // } + // ) + // } + // + // + // ) + return createElement(GestureDetector, { gesture: gesture }, createElement( + Animated.View, + extendObject({ + ref: nodeRef, + onLayout: onLayout, + style: [innerStyle, animatedStyles, layoutStyle] + }, catchEventHandlers), + wrapChildren( + props, + { + hasVarDec, + varContext: varContextRef.current, + textStyle, + textProps + } + ) + )) }) _MovableView.displayName = 'MpxMovableView' diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-navigator.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-navigator.tsx index 90d3465f44..3de5cfd553 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-navigator.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-navigator.tsx @@ -8,7 +8,7 @@ * ✔ delta */ import { View } from 'react-native' -import { useCallback, forwardRef, JSX } from 'react' +import { useCallback, forwardRef, JSX, createElement } from 'react' import useInnerProps from './getInnerListeners' import { redirectTo, navigateTo, navigateBack, reLaunch, switchTab } from '@mpxjs/api-proxy' @@ -53,13 +53,7 @@ const _Navigator = forwardRef((props, ref): JSX.Element = bindtap: handleClick }) - return ( - - {children} - - ) + return createElement(MpxView, innerProps, children) }) _Navigator.displayName = 'MpxNavigator' diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio-group.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio-group.tsx index 5ded44937e..2c1c35db03 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio-group.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio-group.tsx @@ -8,7 +8,8 @@ import { ReactNode, useContext, useMemo, - useEffect + useEffect, + createElement } from 'react' import { View, @@ -154,20 +155,17 @@ const radioGroup = forwardRef< } ) - return ( - - - { - wrapChildren( - props, - { - hasVarDec, - varContext: varContextRef.current - } - ) - } - - + return createElement(View, innerProps, createElement( + RadioGroupContext.Provider, + { value: contextValue }, + wrapChildren( + props, + { + hasVarDec, + varContext: varContextRef.current + } + ) + ) ) }) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx index c1662f5cc8..dd760fcec0 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-radio.tsx @@ -4,7 +4,7 @@ * ✔ checked * ✔ color */ -import { JSX, useRef, useState, forwardRef, useEffect, ReactNode, useContext, Dispatch, SetStateAction } from 'react' +import { JSX, useRef, useState, forwardRef, useEffect, ReactNode, useContext, Dispatch, SetStateAction, createElement } from 'react' import { View, StyleSheet, ViewStyle, NativeSyntheticEvent } from 'react-native' import { warn } from '@mpxjs/utils' import { LabelContext, RadioGroupContext } from './context' @@ -193,32 +193,26 @@ const Radio = forwardRef, RadioProps>( } }, [checked]) - return ( - - - - + return createElement(View, innerProps, + createElement( + View, + { style: defaultStyle }, + createElement(Icon, { + type: 'success', + size: 24, + color: disabled ? '#E1E1E1' : color, + style: extendObject({}, styles.icon, isChecked && styles.iconChecked, disabled && styles.iconDisabled) + }) + ), + wrapChildren( + props, { - wrapChildren( - props, - { - hasVarDec, - varContext: varContextRef.current, - textStyle, - textProps - } - ) + hasVarDec, + varContext: varContextRef.current, + textStyle, + textProps } - + ) ) } ) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-root-portal.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-root-portal.tsx index 46827be068..7c5d53769d 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-root-portal.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-root-portal.tsx @@ -1,7 +1,7 @@ /** * ✔ enable */ -import { ReactNode } from 'react' +import { ReactNode, createElement, Fragment } from 'react' import { Portal } from '@ant-design/react-native' import { warn } from '@mpxjs/utils' interface RootPortalProps { @@ -16,10 +16,8 @@ const _RootPortal = (props: RootPortalProps) => { warn('The root-portal component does not support the style prop.') } return enable - ? - {children} - - : <>{children} + ? createElement(Portal, null, children) + : createElement(Fragment, null, children) } _RootPortal.displayName = 'MpxRootPortal' diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx index 17f45a6e41..c52dc960ff 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-scroll-view.tsx @@ -33,7 +33,7 @@ */ import { ScrollView } from 'react-native-gesture-handler' import { View, RefreshControl, NativeSyntheticEvent, NativeScrollEvent, LayoutChangeEvent, ViewStyle } from 'react-native' -import { JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef, useContext } from 'react' +import { JSX, ReactNode, RefObject, useRef, useState, useEffect, forwardRef, useContext, createElement } from 'react' import { useAnimatedRef } from 'react-native-reanimated' import { warn } from '@mpxjs/utils' import useInnerProps, { getCustomEvent } from './getInnerListeners' @@ -491,32 +491,26 @@ const _ScrollView = forwardRef, S white: ['#fff'] } - return ( - - ) - : undefined} - > - { - wrapChildren( - props, - { - hasVarDec, - varContext: varContextRef.current, - textStyle, - textProps - } - ) + return createElement( + ScrollView, + extendObject({}, innerProps, { + refreshControl: refresherEnabled + ? createElement(RefreshControl, extendObject({ + progressBackgroundColor: refresherBackground, + refreshing: refreshing, + onRefresh: onRefresh + }, (refresherDefaultStyle && refresherDefaultStyle !== 'none' ? { colors: refreshColor[refresherDefaultStyle] } : null))) + : undefined + }), + wrapChildren( + props, + { + hasVarDec, + varContext: varContextRef.current, + textStyle, + textProps } - + ) ) }) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx index 026424c30c..7a1c008071 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-switch.tsx @@ -5,7 +5,7 @@ * ✔ color */ import { Switch, SwitchProps, ViewStyle, NativeSyntheticEvent } from 'react-native' -import { useRef, useEffect, forwardRef, JSX, useState, useContext } from 'react' +import { useRef, useEffect, forwardRef, JSX, useState, useContext, createElement } from 'react' import { warn } from '@mpxjs/utils' import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数 import useInnerProps, { getCustomEvent } from './getInnerListeners' @@ -136,22 +136,26 @@ const _Switch = forwardRef, _SwitchProps>((prop }) if (type === 'checkbox') { - return + return createElement( + CheckBox, + extendObject({}, innerProps, { + color: color, + style: normalStyle, + checked: isChecked + }) + ) } - return + return createElement( + Switch, + extendObject({}, innerProps, { + style: normalStyle, + value: isChecked, + trackColor: { false: '#FFF', true: color }, + thumbColor: isChecked ? '#FFF' : '#f4f3f4', + ios_backgroundColor: '#FFF' + }) + ) }) _Switch.displayName = 'MpxSwitch' diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-text.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-text.tsx index 6962dc9657..e3364de844 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-text.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-text.tsx @@ -5,7 +5,7 @@ * ✘ decode */ import { Text, TextStyle, TextProps } from 'react-native' -import { useRef, forwardRef, ReactNode, JSX } from 'react' +import { useRef, forwardRef, ReactNode, JSX, createElement } from 'react' import useInnerProps from './getInnerListeners' import useNodesRef, { HandlerRef } from './useNodesRef' // 引入辅助函数 import { useTransformStyle, wrapChildren } from './utils' @@ -65,21 +65,13 @@ const _Text = forwardRef, _TextProps>((props, ref): layoutRef }) - return ( - - { - wrapChildren( - props, - { - hasVarDec, - varContext: varContextRef.current - } - ) - } - - ) + return createElement(Text, innerProps, wrapChildren( + props, + { + hasVarDec, + varContext: varContextRef.current + } + )) }) _Text.displayName = 'MpxText' diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-textarea.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-textarea.tsx index 35bb8403e5..24e5907be5 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-textarea.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-textarea.tsx @@ -9,10 +9,10 @@ * ✘ show-confirm-bar * ✔ bindlinechange: No `heightRpx` info. */ -import { JSX, forwardRef } from 'react' +import { JSX, forwardRef, createElement } from 'react' import { Keyboard, TextInput } from 'react-native' import Input, { InputProps, PrivateInputProps } from './mpx-input' -import { omit } from './utils' +import { omit, extendObject } from './utils' import { HandlerRef } from './useNodesRef' export type TextareProps = Omit< @@ -29,14 +29,15 @@ const Textarea = forwardRef, TextareProps>( 'multiline', 'confirm-hold' ]) - return ( - Keyboard.dismiss()} - {...restProps} - /> + + return createElement( + Input, + extendObject({ + ref: ref, + multiline: true, + confirmType: 'next', + bindblur: () => Keyboard.dismiss() + }, restProps) ) } ) diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx index 42b9d0a077..e419c7314c 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-view.tsx @@ -5,7 +5,7 @@ * ✔ hover-stay-time */ import { View, TextStyle, NativeSyntheticEvent, ViewProps, ImageStyle, StyleSheet, Image, LayoutChangeEvent } from 'react-native' -import { useRef, useState, useEffect, forwardRef, ReactNode, JSX } from 'react' +import { useRef, useState, useEffect, forwardRef, ReactNode, JSX, createElement } from 'react' import useInnerProps from './getInnerListeners' import Animated from 'react-native-reanimated' import useAnimationHooks from './useAnimationHooks' @@ -814,17 +814,10 @@ const _View = forwardRef, _ViewProps>((viewProps, r innerStyle, enableFastImage }) + return enableAnimation - ? ( - {childNode} - ) - : ( - {childNode} - ) + ? createElement(Animated.View, innerProps, childNode) + : createElement(View, innerProps, childNode) }) _View.displayName = 'MpxView' diff --git a/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx b/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx index 79038d756a..d205fdc4e3 100644 --- a/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx +++ b/packages/webpack-plugin/lib/runtime/components/react/mpx-web-view.tsx @@ -1,4 +1,4 @@ -import { forwardRef, JSX, useEffect, useRef, useContext, useMemo } from 'react' +import { forwardRef, JSX, useEffect, useRef, useContext, useMemo, createElement } from 'react' import { noop, warn } from '@mpxjs/utils' import { View } from 'react-native' import { Portal } from '@ant-design/react-native' @@ -177,16 +177,14 @@ const _WebView = forwardRef, WebViewProps>((pr onMessage: _message }) } - return ( - - ) + + return createElement(Portal, null, createElement(WebView, extendObject({ + style: defaultWebViewStyle, + source: { uri: src }, + ref: webViewRef, + javaScriptEnabled: true, + onNavigationStateChange: _changeUrl + }, events))) }) _WebView.displayName = 'MpxWebview'