@mpxjs/webpack-plugin 2.10.16 → 2.10.17

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

@@ -1,8 +1,9 @@
-import React, { ReactNode, useContext, useEffect } from 'react'
+/* eslint-disable space-before-function-paren */
+import React, { ReactNode, useContext, useEffect, useRef } from 'react'
 import { DimensionValue, EmitterSubscription, Keyboard, View, ViewStyle, NativeSyntheticEvent, NativeTouchEvent } from 'react-native'
-import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing } from 'react-native-reanimated'
+import Animated, { useSharedValue, useAnimatedStyle, withTiming, Easing, cancelAnimation } from 'react-native-reanimated'
 import { KeyboardAvoidContext } from './context'
-import { isIOS } from './utils'
+import { isAndroid, isIOS } from './utils'
 
 type KeyboardAvoidViewProps = {
   children?: ReactNode
@@ -18,15 +19,34 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   const basic = useSharedValue('auto')
   const keyboardAvoid = useContext(KeyboardAvoidContext)
 
+  // fix: 某些特殊机型下隐藏键盘可能会先触发一次 keyboardWillShow，
+  // 比如机型 iPhone 11 Pro，可能会导致显隐动画冲突
+  // 因此增加状态标记 + cancelAnimation 来优化
+  const isShow = useRef<boolean>(false)
+
   const animatedStyle = useAnimatedStyle(() => ({
-    transform: [{ translateY: -offset.value }],
+    // translate/position top可能会导致底部渲染区域缺失
+    marginTop: -offset.value,
     flexBasis: basic.value as DimensionValue
   }))
 
   const resetKeyboard = () => {
+    if (!isShow.current) {
+      return
+    }
+
+    isShow.current = false
+
     if (keyboardAvoid?.current) {
+      const inputRef = keyboardAvoid.current.ref?.current
+      if (inputRef && inputRef.isFocused()) {
+        // 修复 Android 点击键盘收起按钮时当前 input 没触发失焦的问题
+        inputRef.blur()
+      }
       keyboardAvoid.current = null
     }
+
+    cancelAnimation(offset)
     offset.value = withTiming(0, { duration, easing })
     basic.value = 'auto'
   }
@@ -40,51 +60,55 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   useEffect(() => {
     let subscriptions: EmitterSubscription[] = []
 
-    if (isIOS) {
-      subscriptions = [
-        Keyboard.addListener('keyboardWillShow', (evt: any) => {
-          if (!keyboardAvoid?.current) return
-          const { endCoordinates } = evt
-          const { ref, cursorSpacing = 0 } = keyboardAvoid.current
-          setTimeout(() => {
-            ref?.current?.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
+    function keybaordAvoding(evt: any) {
+      if (!keyboardAvoid?.current || isShow.current) {
+        return
+      }
+
+      isShow.current = true
+
+      const { endCoordinates } = evt
+      const { ref, cursorSpacing = 0, adjustPosition, onKeyboardShow } = keyboardAvoid.current
+      keyboardAvoid.current.keyboardHeight = endCoordinates.height
+      onKeyboardShow?.()
+      if (adjustPosition) {
+        // 默认沿用旧版本逻辑，在 android 原生关闭键盘避让的情况下应该将该配置设置为 false，走 mpx 的键盘避让逻辑，否则bundle内的所有input都会无法避让键盘
+        const enableNativeKeyboardAvoiding = mpxGlobal?.__mpx?.config?.rnConfig?.enableNativeKeyboardAvoiding ?? true
+        const callback = () => {
+          ref?.current?.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
+            function calculateOffset() {
+              // enableNativeKeyboardAvoding 默认开启
+              if (enableNativeKeyboardAvoiding && isAndroid) {
+                const aboveOffset = pageY + height - endCoordinates.screenY
+                const belowOffset = endCoordinates.height - aboveOffset
+                const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing
+                const belowValue = Math.min(belowOffset, cursorSpacing)
+                return aboveOffset > 0 ? belowValue : aboveValue
+              }
+
               const aboveOffset = offset.value + pageY + height - endCoordinates.screenY
               const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing
               const belowValue = Math.min(endCoordinates.height, aboveOffset + cursorSpacing)
-              const value = aboveOffset > 0 ? belowValue : aboveValue
-              offset.value = withTiming(value, { duration, easing }, (finished) => {
-                if (finished) {
-                  // Set flexBasic after animation to trigger re-layout and reset layout information
-                  basic.value = '99.99%'
-                }
-              })
-            })
-          })
-        }),
-        Keyboard.addListener('keyboardWillHide', resetKeyboard)
-      ]
-    } else {
-      subscriptions = [
-        Keyboard.addListener('keyboardDidShow', (evt: any) => {
-          if (!keyboardAvoid?.current) return
-          const { endCoordinates } = evt
-          const { ref, cursorSpacing = 0 } = keyboardAvoid.current
-          ref?.current?.measure((x: number, y: number, width: number, height: number, pageX: number, pageY: number) => {
-            const aboveOffset = pageY + height - endCoordinates.screenY
-            const belowOffset = endCoordinates.height - aboveOffset
-            const aboveValue = -aboveOffset >= cursorSpacing ? 0 : aboveOffset + cursorSpacing
-            const belowValue = Math.min(belowOffset, cursorSpacing)
-            const value = aboveOffset > 0 ? belowValue : aboveValue
-            offset.value = withTiming(value, { duration, easing }, (finished) => {
+              return aboveOffset > 0 ? belowValue : aboveValue
+            }
+
+            cancelAnimation(offset)
+            offset.value = withTiming(calculateOffset(), { duration, easing }, finished => {
               if (finished) {
                 // Set flexBasic after animation to trigger re-layout and reset layout information
                 basic.value = '99.99%'
               }
             })
           })
-        }),
-        Keyboard.addListener('keyboardDidHide', resetKeyboard)
-      ]
+        }
+        ;(isIOS ? () => setTimeout(callback) : callback)()
+      }
+    }
+
+    if (isIOS) {
+      subscriptions = [Keyboard.addListener('keyboardWillShow', keybaordAvoding), Keyboard.addListener('keyboardWillHide', resetKeyboard)]
+    } else {
+      subscriptions = [Keyboard.addListener('keyboardDidShow', keybaordAvoding), Keyboard.addListener('keyboardDidHide', resetKeyboard)]
     }
 
     return () => {
@@ -93,15 +117,8 @@ const KeyboardAvoidingView = ({ children, style, contentContainerStyle }: Keyboa
   }, [keyboardAvoid])
 
   return (
-    <View style={style} onTouchEnd={onTouchEnd}>
-      <Animated.View
-        style={[
-          contentContainerStyle,
-          animatedStyle
-        ]}
-      >
-        {children}
-      </Animated.View>
+    <View style={style} onTouchEnd={onTouchEnd} onTouchMove={onTouchEnd}>
+      <Animated.View style={[contentContainerStyle, animatedStyle]}>{children}</Animated.View>
     </View>
   )
 }

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

@@ -0,0 +1,155 @@
+/* eslint-disable space-before-function-paren */
+import { useState, useMemo, memo } from 'react'
+import { useSafeAreaInsets } from 'react-native-safe-area-context'
+import { StatusBar, processColor, TouchableWithoutFeedback, Image, View, StyleSheet, Text } from 'react-native'
+
+function convertToHex(color?: string) {
+  try {
+    const intColor = processColor(color) as number | null | undefined
+    if (intColor === null || intColor === undefined) {
+      return null
+    }
+    // 将32位整数颜色值转换为RGBA
+    const r = (intColor >> 16) & 255
+    const g = (intColor >> 8) & 255
+    const b = intColor & 255
+    // 转换为十六进制
+    const hexR = r.toString(16).padStart(2, '0')
+    const hexG = g.toString(16).padStart(2, '0')
+    const hexB = b.toString(16).padStart(2, '0')
+    return `#${hexR}${hexG}${hexB}`
+  } catch (error) {
+    return null
+  }
+}
+
+const titleHeight = 44
+export function useInnerHeaderHeight(pageConfig: PageConfig) {
+  const safeArea = useSafeAreaInsets()
+  if (pageConfig.navigationStyle === 'custom') {
+    return 0
+  } else {
+    const safeAreaTop = safeArea?.top || 0
+    const headerHeight = safeAreaTop + titleHeight
+    return headerHeight
+  }
+}
+
+const styles = StyleSheet.create({
+  header: {
+    elevation: 3
+  },
+  headerContent: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  backButton: {
+    position: 'absolute',
+    height: '100%',
+    width: 40,
+    left: 0,
+    top: 0,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  backButtonImage: {
+    width: 22,
+    height: 22
+  },
+  title: {
+    fontSize: 17,
+    fontWeight: 600,
+    width: '60%',
+    textAlign: 'center'
+  }
+})
+const NavColor = {
+  White: '#ffffff',
+  Black: '#000000'
+}
+// navigationBarTextStyle 只支持黑白 'white'/'black
+const validBarTextStyle = (textStyle?: string) => {
+  const textStyleColor = convertToHex(textStyle)
+  if (textStyle && textStyleColor && [NavColor.White, NavColor.Black].includes(textStyleColor)) {
+    return textStyleColor
+  } else {
+    return NavColor.White
+  }
+}
+
+export interface MpxNavProps {
+  pageConfig: PageConfig
+  navigation: any
+}
+
+const BACK_ICON =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAABICAYAAACqT5alAAAA2UlEQVR4nO3bMQrCUBRE0Yla6AYEN2nnBrTL+izcitW3MRDkEUWSvPzJvfCqgMwhZbAppWhNbbIHzB1g9wATERFRVyvpkj1irlpJ5X326D7WHh1hbdFD2CLpLmmftm7kfsEe09aNHFiBrT+wAlt/YAW2/sAKbP2BFdj6Ayuwy+ufz6XPL893krZ//O6iu2n4LT8kndLWTRTo4EC7BDo40C6BDg60S6CDA+0S6OBAuwQ6uNWiD2nrJmoIfU7cNWkR2hbb1UfbY7uuWhGWiIg+a/iHuHmA3QPs3gu4JW9Gan+OJAAAAABJRU5ErkJggg=='
+
+const MpxNav = memo(({ pageConfig, navigation }: MpxNavProps) => {
+  const [innerPageConfig, setPageConfig] = useState<PageConfig>(pageConfig || {})
+  const safeAreaTop = useSafeAreaInsets()?.top || 0
+
+  navigation.setPageConfig = (config: PageConfig) => {
+    setPageConfig(Object.assign({}, innerPageConfig, config))
+  }
+  const isCustom = innerPageConfig.navigationStyle === 'custom'
+  const navigationBarTextStyle = useMemo(() => validBarTextStyle(innerPageConfig.navigationBarTextStyle), [innerPageConfig.navigationBarTextStyle])
+  // 状态栏的颜色
+  const statusBarElement = (
+    <StatusBar
+      translucent
+      backgroundColor='transparent'
+      barStyle={navigationBarTextStyle === NavColor.White ? 'light-content' : 'dark-content'}></StatusBar>
+  )
+
+  if (isCustom) return statusBarElement
+  // 假设是栈导航，获取栈的长度
+  const stackLength = navigation.getState()?.routes?.length
+  const onStackTopBack = mpxGlobal?.__mpx?.config?.rnConfig?.onStackTopBack
+  const isHandleStackTopBack = typeof onStackTopBack === 'function'
+
+  // 回退按钮与图标
+  // prettier-ignore
+  const backElement = stackLength > 1 || isHandleStackTopBack
+    ? (
+      <TouchableWithoutFeedback
+        onPress={() => {
+          if (stackLength <= 1 && isHandleStackTopBack) {
+            onStackTopBack()
+            return
+          }
+          navigation.goBack()
+        }}>
+        <View style={[styles.backButton]}>
+          <Image style={[styles.backButtonImage, { tintColor: navigationBarTextStyle }]} source={{ uri: BACK_ICON }}></Image>
+        </View>
+      </TouchableWithoutFeedback>
+      )
+    : null
+
+  return (
+    <View
+      style={[
+        styles.header,
+        {
+          paddingTop: safeAreaTop,
+          backgroundColor: innerPageConfig.navigationBarBackgroundColor || '#000000'
+        }
+      ]}>
+      {statusBarElement}
+      {/* TODO: 确定 height 的有效性 */}
+      {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment */}
+      {/* @ts-expect-error */}
+      <View style={styles.headerContent} height={titleHeight}>
+        {backElement}
+        <Text style={[styles.title, { color: navigationBarTextStyle }]} numberOfLines={1}>
+          {innerPageConfig.navigationBarTitleText?.trim() || ''}
+        </Text>
+      </View>
+    </View>
+  )
+})
+
+MpxNav.displayName = 'MpxNav'
+export default MpxNav

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

@@ -33,6 +33,7 @@ interface PickerViewProps {
   style?: {
     [key: string]: any
   }
+  'enable-wheel-animation'?: boolean
   'indicator-style'?: Record<string, any>,
   'mask-style'?: Record<string, any>,
   'enable-var'?: boolean
@@ -69,6 +70,7 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
     value = [],
     bindchange,
     style,
+    'enable-wheel-animation': enableWheelAnimation = true,
     'indicator-style': indicatorStyle = {},
     'mask-style': pickerMaskStyle = {},
     'enable-var': enableVar,
@@ -168,7 +170,7 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
         columnData,
         ref: cloneRef,
         columnIndex: index,
-        key: `pick-view-${index}`,
+        key: `pick-view-${index}-${columnData.length}`,
         wrapperStyle: {
           height: normalStyle?.height || DefaultPickerItemH,
           itemHeight: indicatorH || DefaultPickerItemH
@@ -176,7 +178,8 @@ const _PickerView = forwardRef<HandlerRef<View, PickerViewProps>, PickerViewProp
         onSelectChange: onSelectChange.bind(null, index),
         initialIndex,
         pickerIndicatorStyle,
-        pickerMaskStyle
+        pickerMaskStyle,
+        enableWheelAnimation
       }
     )
     const realElement = React.cloneElement(child, wrappedProps)

package/lib/runtime/components/react/mpx-picker-view-column/index.tsx

@@ -5,7 +5,8 @@ import { useTransformStyle, splitStyle, splitProps, useLayout, usePrevious, isAn
 import useNodesRef, { HandlerRef } from '../useNodesRef'
 import PickerIndicator from './pickerViewIndicator'
 import PickerMask from './pickerViewMask'
-import MpxPickerVIewColumnItem from './pickerViewColumnItem'
+import MpxPickerViewColumnItem from './pickerViewColumnItem'
+import MpxPickerViewColumnItemLite from './pickerViewColumnItemLite'
 import { PickerViewColumnAnimationContext } from '../mpx-picker-view/pickerVIewContext'
 import { calcHeightOffsets } from './pickerViewFaces'
 
@@ -25,6 +26,7 @@ interface ColumnProps {
   }
   pickerMaskStyle: Record<string, any>
   pickerIndicatorStyle: Record<string, any>
+  enableWheelAnimation?: boolean
 }
 
 const visibleCount = 5
@@ -39,6 +41,7 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     wrapperStyle,
     pickerMaskStyle,
     pickerIndicatorStyle,
+    enableWheelAnimation = true,
     'enable-var': enableVar,
     'external-var-context': externalVarContext
   } = props
@@ -95,6 +98,11 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     return [{ paddingVertical: paddingHeight }]
   }, [paddingHeight])
 
+  const initialContentOffsetY = useMemo(
+    () => initialIndex * itemRawH,
+    [initialIndex, itemRawH]
+  )
+
   const getIndex = useCallback((y: number) => {
     const calc = Math.round(y / itemRawH)
     return Math.max(0, Math.min(calc, maxIndex))
@@ -152,17 +160,6 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
     }, isIOS ? 0 : 200)
   }, [itemRawH, maxIndex, initialIndex])
 
-  const onContentSizeChange = useCallback((_w: number, h: number) => {
-    const y = initialIndex * itemRawH
-    if (y <= h) {
-      clearTimerScrollTo()
-      timerScrollTo.current = setTimeout(() => {
-        scrollViewRef.current?.scrollTo({ x: 0, y, animated: false })
-        activeIndex.current = initialIndex
-      }, 0)
-    }
-  }, [itemRawH, initialIndex])
-
   const onItemLayout = useCallback((e: LayoutChangeEvent) => {
     const { height: rawH } = e.nativeEvent.layout
     const roundedH = Math.round(rawH)
@@ -287,8 +284,8 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
 
   const renderInnerchild = () =>
     columnData.map((item: React.ReactElement, index: number) => {
-      return (
-        <MpxPickerVIewColumnItem
+      return enableWheelAnimation
+        ? (<MpxPickerViewColumnItem
           key={index}
           item={item}
           index={index}
@@ -297,8 +294,16 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
           textProps={textProps}
           visibleCount={visibleCount}
           onItemLayout={onItemLayout}
-        />
-      )
+        />)
+        : (<MpxPickerViewColumnItemLite
+          key={index}
+          item={item}
+          index={index}
+          itemHeight={itemHeight}
+          textStyle={textStyle}
+          textProps={textProps}
+          onItemLayout={onItemLayout}
+        />)
     })
 
   const renderScollView = () => {
@@ -320,8 +325,8 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
       onScrollEndDrag,
       onMomentumScrollBegin,
       onMomentumScrollEnd,
-      onContentSizeChange,
-      contentContainerStyle
+      contentContainerStyle,
+      contentOffset: { x: 0, y: initialContentOffsetY }
     }) as React.ComponentProps<typeof Reanimated.ScrollView>
 
     return createElement(
@@ -351,9 +356,9 @@ const _PickerViewColumn = forwardRef<HandlerRef<ScrollView & View, ColumnProps>,
 
   return (
     <View style={[styles.wrapper, normalStyle]}>
-        {renderScollView()}
-        {renderMask()}
-        {renderIndicator()}
+      {renderScollView()}
+      {renderMask()}
+      {renderIndicator()}
     </View>
   )
 })

package/lib/runtime/components/react/mpx-picker-view-column/pickerViewColumnItem.tsx

@@ -1,6 +1,6 @@
-import React, { useEffect } from 'react'
+import React, { useMemo } from 'react'
 import { LayoutChangeEvent } from 'react-native'
-import Reanimated, { Extrapolation, interpolate, useAnimatedStyle, useSharedValue } from 'react-native-reanimated'
+import Reanimated, { Extrapolation, interpolate, useAnimatedStyle } from 'react-native-reanimated'
 import { extendObject } from '../utils'
 import { createFaces } from './pickerViewFaces'
 import { usePickerViewColumnAnimationContext, usePickerViewStyleContext } from '../mpx-picker-view/pickerVIewContext'
@@ -28,20 +28,16 @@ const PickerViewColumnItem: React.FC<PickerColumnItemProps> = ({
 }) => {
   const textStyleFromAncestor = usePickerViewStyleContext()
   const offsetYShared = usePickerViewColumnAnimationContext()
-  const facesShared = useSharedValue(createFaces(itemHeight, visibleCount))
-
-  useEffect(() => {
-    facesShared.value = createFaces(itemHeight, visibleCount)
-  }, [itemHeight])
+  const facesShared = useMemo(() => createFaces(itemHeight, visibleCount), [itemHeight, visibleCount])
 
   const animatedStyles = useAnimatedStyle(() => {
-    const inputRange = facesShared.value.map((f) => itemHeight * (index + f.index))
+    const inputRange = facesShared.map((f) => itemHeight * (index + f.index))
     return {
-      opacity: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.opacity), Extrapolation.CLAMP),
+      opacity: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.opacity), Extrapolation.CLAMP),
       transform: [
-        { translateY: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.offsetY), Extrapolation.EXTEND) },
-        { rotateX: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.deg), Extrapolation.CLAMP) + 'deg' },
-        { scale: interpolate(offsetYShared.value, inputRange, facesShared.value.map((x) => x.scale), Extrapolation.EXTEND) }
+        { translateY: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.offsetY), Extrapolation.EXTEND) },
+        { rotateX: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.deg), Extrapolation.CLAMP) + 'deg' },
+        { scale: interpolate(offsetYShared.value, inputRange, facesShared.map((x) => x.scale), Extrapolation.EXTEND) }
       ]
     }
   })

package/lib/runtime/components/react/mpx-picker-view-column/pickerViewColumnItemLite.tsx

@@ -0,0 +1,55 @@
+import React from 'react'
+import { LayoutChangeEvent, View } from 'react-native'
+import { extendObject } from '../utils'
+import { usePickerViewStyleContext } from '../mpx-picker-view/pickerVIewContext'
+
+interface PickerColumnItemProps {
+  item: React.ReactElement
+  index: number
+  itemHeight: number
+  itemWidth?: number | '100%'
+  textStyle: Record<string, any>
+  textProps?: any
+  onItemLayout?: (e: LayoutChangeEvent) => void
+}
+
+const PickerViewColumnItem: React.FC<PickerColumnItemProps> = ({
+  item,
+  index,
+  itemHeight,
+  itemWidth = '100%',
+  textStyle,
+  textProps,
+  onItemLayout
+}) => {
+  const textStyleFromAncestor = usePickerViewStyleContext()
+  const strKey = `picker-column-item-${index}`
+  const restProps = index === 0 ? { onLayout: onItemLayout } : {}
+  const itemProps = extendObject(
+    {
+      style: extendObject(
+        { height: itemHeight, width: '100%' },
+        textStyleFromAncestor,
+        textStyle,
+        item.props.style
+      )
+    },
+    textProps,
+    restProps
+  )
+  const realItem = React.cloneElement(item, itemProps)
+
+  return (
+    <View
+      key={strKey}
+      style={[
+        { height: itemHeight, width: itemWidth, pointerEvents: 'none' }
+      ]}
+    >
+      {realItem}
+    </View>
+  )
+}
+
+PickerViewColumnItem.displayName = 'MpxPickerViewColumnItem'
+export default PickerViewColumnItem

package/lib/runtime/components/react/mpx-portal/index.tsx

@@ -1,19 +1,25 @@
 import { ReactNode, useContext, useEffect, useRef } from 'react'
-import { PortalContext, RouteContext, VarContext } from '../context'
+import { PortalContext, ProviderContext, RouteContext, VarContext } from '../context'
 import PortalHost, { portal } from './portal-host'
 
 export type PortalProps = {
   children?: ReactNode
 }
 
-const Portal = ({ children }:PortalProps): null => {
+const Portal = ({ children }: PortalProps): null => {
   const manager = useContext(PortalContext)
   const keyRef = useRef<any>(null)
   const { pageId } = useContext(RouteContext) || {}
   const varContext = useContext(VarContext)
+  const parentProvides = useContext(ProviderContext)
+
   if (varContext) {
     children = (<VarContext.Provider value={varContext} key='varContextWrap'>{children}</VarContext.Provider>)
   }
+  if (parentProvides) {
+    children = (<ProviderContext.Provider value={parentProvides} key='providerContextWrap'>{children}</ProviderContext.Provider>)
+  }
+
   useEffect(() => {
     manager.update(keyRef.current, children)
   }, [children])

package/lib/runtime/components/react/mpx-rich-text/index.tsx

@@ -130,6 +130,6 @@ const _RichText = forwardRef<HandlerRef<View, _RichTextProps>, _RichTextProps>((
   return finalComponent
 })
 
-_RichText.displayName = 'mpx-rich-text'
+_RichText.displayName = 'MpxRichText'
 
 export default _RichText

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

@@ -159,9 +159,6 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
   const simultaneousHandlers = flatGesture(originSimultaneousHandlers)
   const waitForHandlers = flatGesture(waitFor)
 
-  const snapScrollTop = useRef(0)
-  const snapScrollLeft = useRef(0)
-
   const [refreshing, setRefreshing] = useState(false)
 
   const [enableScroll, setEnableScroll] = useState(true)
@@ -268,16 +265,12 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
     warn('scroll-x and scroll-y cannot be set to true at the same time, Mpx will use the value of scroll-y as the criterion')
   }
   useEffect(() => {
-    if (
-      snapScrollTop.current !== scrollTop || snapScrollLeft.current !== scrollLeft
-    ) {
-      initialTimeout.current = setTimeout(() => {
-        scrollToOffset(scrollLeft, scrollTop)
-      }, 0)
-
-      return () => {
-        initialTimeout.current && clearTimeout(initialTimeout.current)
-      }
+    initialTimeout.current = setTimeout(() => {
+      scrollToOffset(scrollLeft, scrollTop)
+    }, 0)
+
+    return () => {
+      initialTimeout.current && clearTimeout(initialTimeout.current)
     }
   }, [scrollTop, scrollLeft])
 
@@ -481,10 +474,6 @@ const _ScrollView = forwardRef<HandlerRef<ScrollView & View, ScrollViewProps>, S
   function scrollToOffset (x = 0, y = 0, animated = scrollWithAnimation) {
     if (scrollViewRef.current) {
       scrollViewRef.current.scrollTo({ x, y, animated })
-      scrollOptions.current.scrollLeft = x
-      scrollOptions.current.scrollTop = y
-      snapScrollLeft.current = x
-      snapScrollTop.current = y
     }
   }