路由切换使用native-stack&相交api部分问题修复

packages/api-proxy/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,21 +11,27 @@ 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
     this.relativeRef = null
     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)
     })
   }
 

packages/core/src/platform/createApp.ios.js

@@ -6,7 +6,6 @@ import { LIFECYCLE } from '../platform/patch/lifecycle/index'
 import Mpx from '../index'
 import { createElement, memo, useRef, useEffect } from 'react'
 import * as ReactNative from 'react-native'
-import { Image } from 'react-native'
 
 const appHooksMap = makeMap(mergeLifecycle(LIFECYCLE).app)
 
@@ -180,18 +179,18 @@ export default function createApp (options) {
     }, [])
 
     const { initialRouteName, initialParams } = initialRouteRef.current
-    const headerBackImageProps = Mpx.config.rnConfig.headerBackImageProps || null
+    const headerBackImageSource = Mpx.config.rnConfig.headerBackImageSource || null
     const navScreenOpts = {
       // 7.x替换headerBackTitleVisible
       // headerBackButtonDisplayMode: 'minimal',
       headerBackTitleVisible: false,
       // 安卓上会出现初始化时闪现导航条的问题
-      headerShown: false
+      headerShown: false,
+      // 隐藏导航下的那条线
+      headerShadowVisible: false
     }
-    if (headerBackImageProps) {
-      navScreenOpts.headerBackImage = () => {
-        return createElement(Image, headerBackImageProps)
-      }
+    if (headerBackImageSource) {
+      navScreenOpts.headerBackImageSource = headerBackImageSource
     }
     return createElement(SafeAreaProvider,
       null,

packages/core/src/platform/patch/getDefaultOptions.ios.js

@@ -499,20 +499,15 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
 
       useLayoutEffect(() => {
         const isCustom = pageConfig.navigationStyle === 'custom'
-        navigation.setOptions({
+        navigation.setOptions(Object.assign({
           headerShown: !isCustom,
           title: pageConfig.navigationBarTitleText || '',
           headerStyle: {
             backgroundColor: pageConfig.navigationBarBackgroundColor || '#000000'
           },
-          headerTintColor: pageConfig.navigationBarTextStyle || 'white'
-        })
-        if (__mpx_mode__ === 'android') {
-          ReactNative.StatusBar.setBarStyle(pageConfig.barStyle || 'dark-content')
-          ReactNative.StatusBar.setTranslucent(isCustom) // 控制statusbar是否占位
-          const color = isCustom ? 'transparent' : pageConfig.statusBarColor
-          color && ReactNative.StatusBar.setBackgroundColor(color)
-        }
+          headerTintColor: pageConfig.navigationBarTextStyle || 'white',
+          statusBarTranslucent: true
+        }, __mpx_mode__ === 'android' ? { statusBarStyle: pageConfig.statusBarStyle || 'light' } : {}))
       }, [])
 
       const rootRef = useRef(null)

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

@@ -25,14 +25,14 @@ module.exports = function (script, {
     output += `
 import { getComponent } from ${stringifyRequest(loaderContext, optionProcessorPath)}
 import { NavigationContainer, StackActions } from '@react-navigation/native'
-import { createStackNavigator } from '@react-navigation/stack'
+import { createNativeStackNavigator } from '@react-navigation/native-stack'
 import { Provider } from '@ant-design/react-native'
 import { SafeAreaProvider, useSafeAreaInsets } from 'react-native-safe-area-context'
 import { GestureHandlerRootView } from 'react-native-gesture-handler'
 
 global.__navigationHelper = {
   NavigationContainer: NavigationContainer,
-  createStackNavigator: createStackNavigator,
+  createStackNavigator: createNativeStackNavigator,
   StackActions: StackActions,
   GestureHandlerRootView: GestureHandlerRootView,
   Provider: Provider,