diff --git a/packages/api-proxy/src/platform/api/create-intersection-observer/rnIntersectionObserver.js b/packages/api-proxy/src/platform/api/create-intersection-observer/rnIntersectionObserver.js index 038b67099b..be4dcba705 100644 --- a/packages/api-proxy/src/platform/api/create-intersection-observer/rnIntersectionObserver.js +++ b/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,13 +11,19 @@ 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 @@ -26,7 +31,7 @@ class RNIntersectionObserver { 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) }) } diff --git a/packages/core/src/platform/createApp.ios.js b/packages/core/src/platform/createApp.ios.js index b74e67c5e4..2c2c6cf7b9 100644 --- a/packages/core/src/platform/createApp.ios.js +++ b/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, diff --git a/packages/core/src/platform/patch/getDefaultOptions.ios.js b/packages/core/src/platform/patch/getDefaultOptions.ios.js index c98e3ea19b..ff5cc75161 100644 --- a/packages/core/src/platform/patch/getDefaultOptions.ios.js +++ b/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) diff --git a/packages/webpack-plugin/lib/react/processScript.js b/packages/webpack-plugin/lib/react/processScript.js index 7ad2a9913f..0a61ca71e6 100644 --- a/packages/webpack-plugin/lib/react/processScript.js +++ b/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,