From c53a7e1e8b0fd015db3fff90077d4f27b6cf5af4 Mon Sep 17 00:00:00 2001 From: human Date: Wed, 15 Jan 2025 17:49:20 +0800 Subject: [PATCH 1/6] =?UTF-8?q?fix:=20=E7=9B=B8=E4=BA=A4api=E9=97=AE?= =?UTF-8?q?=E9=A2=98=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../rnIntersectionObserver.js | 29 ++++++++++--------- 1 file changed, 16 insertions(+), 13 deletions(-) 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..b9d423e3f4 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 @@ -2,7 +2,6 @@ import { isArray, isObject, isString, noop } 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,10 +11,14 @@ 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.options = Object.assign({ + thresholds: [0], + initialRatio: 0, + observeAll: false + }, options || {}) + this.thresholds = this.options.thresholds.sort((a, b) => a - b) || [0] + this.initialRatio = this.options.initialRatio + this.observeAll = this.options.observeAll // 组件上挂载对应的observers，用于在组件销毁的时候进行批量disconnect this.component._intersectionObservers = this.component.__intersectionObservers || [] @@ -26,7 +29,7 @@ class RNIntersectionObserver { this.margins = DefaultMargin this.callback = noop - this.throttleMeasure = this.getThrottleMeasure(options.throttleTime || 100) + this.throttleMeasure = this.getThrottleMeasure(this.options.throttleTime || 100) // 记录上一次相交的比例 this.previousIntersectionRatio = [] @@ -65,7 +68,7 @@ class RNIntersectionObserver { observe (selector, callback) { if (this.observerRefs) { - console.error('"observe" call can be only called once in IntersectionObserver') + console.warn('"observe" call can be only called once in IntersectionObserver') return } let targetRef = null @@ -75,7 +78,7 @@ class RNIntersectionObserver { targetRef = this.component.__selectRef(selector, 'node') } if (!targetRef || targetRef.length === 0) { - console.error('intersection observer target not found') + console.warn('intersection observer target not found') return } this.observerRefs = isArray(targetRef) ? targetRef : [targetRef] @@ -87,7 +90,7 @@ class RNIntersectionObserver { if (this.windowRect) return this.windowRect const navigation = getFocusedNavigation() || {} const screen = Dimensions.get('screen') - const navigationLayout = navigation.layout || { + const navigationLayout = navigation.layout || { x: 0, y: 0, width: screen.width, @@ -95,10 +98,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 From e970b23c25eaf71ac7829a9ed3b0ae1bd6ef5d50 Mon Sep 17 00:00:00 2001 From: human Date: Wed, 15 Jan 2025 19:23:45 +0800 Subject: [PATCH 2/6] =?UTF-8?q?fix:=20=E4=BD=BF=E7=94=A8native-stack?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/core/src/platform/createApp.ios.js | 12 ++++++------ packages/webpack-plugin/lib/react/processScript.js | 4 ++-- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/core/src/platform/createApp.ios.js b/packages/core/src/platform/createApp.ios.js index b74e67c5e4..9e41b822c6 100644 --- a/packages/core/src/platform/createApp.ios.js +++ b/packages/core/src/platform/createApp.ios.js @@ -180,18 +180,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/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, From 8ab4e76fddb6d206de0bef43e9d4bf3f82a0d5d0 Mon Sep 17 00:00:00 2001 From: human Date: Wed, 15 Jan 2025 22:28:29 +0800 Subject: [PATCH 3/6] =?UTF-8?q?fix:=20=E4=BD=BF=E7=94=A8native-stack?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../rnIntersectionObserver.js | 2 +- packages/core/src/platform/createApp.ios.js | 1 - .../core/src/platform/patch/getDefaultOptions.ios.js | 9 ++------- 3 files changed, 3 insertions(+), 9 deletions(-) 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 b9d423e3f4..f8ce5fed91 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 @@ -90,7 +90,7 @@ class RNIntersectionObserver { if (this.windowRect) return this.windowRect const navigation = getFocusedNavigation() || {} const screen = Dimensions.get('screen') - const navigationLayout = navigation.layout || { + const navigationLayout = navigation.layout || { x: 0, y: 0, width: screen.width, diff --git a/packages/core/src/platform/createApp.ios.js b/packages/core/src/platform/createApp.ios.js index 9e41b822c6..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) diff --git a/packages/core/src/platform/patch/getDefaultOptions.ios.js b/packages/core/src/platform/patch/getDefaultOptions.ios.js index c98e3ea19b..71bcbdeb75 100644 --- a/packages/core/src/platform/patch/getDefaultOptions.ios.js +++ b/packages/core/src/platform/patch/getDefaultOptions.ios.js @@ -505,14 +505,9 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) { headerStyle: { backgroundColor: pageConfig.navigationBarBackgroundColor || '#000000' }, - headerTintColor: pageConfig.navigationBarTextStyle || 'white' + headerTintColor: pageConfig.navigationBarTextStyle || 'white', + statusBarTranslucent: true }) - 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) - } }, []) const rootRef = useRef(null) From ec0878fac0e20543233daadcba9d5610cb6ea978 Mon Sep 17 00:00:00 2001 From: human Date: Fri, 17 Jan 2025 19:41:59 +0800 Subject: [PATCH 4/6] =?UTF-8?q?fix:=20codereivew=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../rnIntersectionObserver.js | 18 ++++++++++-------- .../platform/patch/getDefaultOptions.ios.js | 4 ++-- 2 files changed, 12 insertions(+), 10 deletions(-) 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 f8ce5fed91..fa9a82ea8c 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,4 +1,4 @@ -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' @@ -11,17 +11,19 @@ class RNIntersectionObserver { constructor (component, options, intersectionCtx) { this.id = idCount++ this.component = component + this.mpxFileResource = component.__mpxProxy?.options?.mpxFileResource || '' this.options = Object.assign({ thresholds: [0], initialRatio: 0, - observeAll: false + observeAll: false, + throttleTime: 100 }, options || {}) this.thresholds = this.options.thresholds.sort((a, b) => a - b) || [0] 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 @@ -29,7 +31,7 @@ class RNIntersectionObserver { this.margins = DefaultMargin this.callback = noop - this.throttleMeasure = this.getThrottleMeasure(this.options.throttleTime || 100) + this.throttleMeasure = this.getThrottleMeasure(this.options.throttleTime) // 记录上一次相交的比例 this.previousIntersectionRatio = [] @@ -55,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 } @@ -68,7 +70,7 @@ class RNIntersectionObserver { observe (selector, callback) { if (this.observerRefs) { - console.warn('"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 @@ -78,7 +80,7 @@ class RNIntersectionObserver { targetRef = this.component.__selectRef(selector, 'node') } if (!targetRef || targetRef.length === 0) { - console.warn('intersection observer target not found') + warn('intersection observer target not found', this.mpxFileResource) return } this.observerRefs = isArray(targetRef) ? targetRef : [targetRef] @@ -230,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/patch/getDefaultOptions.ios.js b/packages/core/src/platform/patch/getDefaultOptions.ios.js index 71bcbdeb75..ff5cc75161 100644 --- a/packages/core/src/platform/patch/getDefaultOptions.ios.js +++ b/packages/core/src/platform/patch/getDefaultOptions.ios.js @@ -499,7 +499,7 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) { useLayoutEffect(() => { const isCustom = pageConfig.navigationStyle === 'custom' - navigation.setOptions({ + navigation.setOptions(Object.assign({ headerShown: !isCustom, title: pageConfig.navigationBarTitleText || '', headerStyle: { @@ -507,7 +507,7 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) { }, headerTintColor: pageConfig.navigationBarTextStyle || 'white', statusBarTranslucent: true - }) + }, __mpx_mode__ === 'android' ? { statusBarStyle: pageConfig.statusBarStyle || 'light' } : {})) }, []) const rootRef = useRef(null) From 6f552520ef3896cc980b170e797ff5d918597c0a Mon Sep 17 00:00:00 2001 From: human Date: Fri, 17 Jan 2025 19:43:53 +0800 Subject: [PATCH 5/6] =?UTF-8?q?fix:=20codereivew=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/create-intersection-observer/rnIntersectionObserver.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 fa9a82ea8c..a0b5978d1f 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 @@ -18,7 +18,7 @@ class RNIntersectionObserver { observeAll: false, throttleTime: 100 }, options || {}) - this.thresholds = this.options.thresholds.sort((a, b) => a - b) || [0] + this.thresholds = this.options.thresholds.sort((a, b) => a - b) this.initialRatio = this.options.initialRatio this.observeAll = this.options.observeAll From c52df0e124faf773e6a305e52b0d2ded2a5b95cb Mon Sep 17 00:00:00 2001 From: human Date: Fri, 17 Jan 2025 19:49:20 +0800 Subject: [PATCH 6/6] =?UTF-8?q?fix:=20codereivew=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../api/create-intersection-observer/rnIntersectionObserver.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 a0b5978d1f..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 @@ -23,7 +23,7 @@ class RNIntersectionObserver { 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