RN: fix pageId & onshow/onhide

didi · Aug 28, 2024 · 707f497 · 707f497
1 parent b9fc674
commit 707f497
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 23 deletions.
diff --git a/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js b/packages/core/src/platform/builtInMixins/styleHelperMixin.ios.js
@@ -110,6 +110,7 @@ export default function styleHelperMixin (type) {
         return concat(staticClass, stringifyDynamicClass(dynamicClass))
       },
       __getStyle (staticClass, dynamicClass, staticStyle, dynamicStyle, show) {
+        // todo 每次返回新对象会导致react memo优化失效，需要考虑优化手段
         const result = []
         const classMap = {}
         if (type === 'page' && isFunction(global.__getAppClassMap)) {

diff --git a/packages/core/src/platform/createApp.ios.js b/packages/core/src/platform/createApp.ios.js
@@ -114,13 +114,13 @@ export default function createApp (option, config = {}) {
         if (currentState === 'active') {
           global.__mpxAppCbs.show.forEach((cb) => {
             cb(options)
-            global.__mpxAppFocusedState.value = 'show'
           })
-        } else if (currentState === 'background') {
+          global.__mpxAppFocusedState.value = 'show'
+        } else if (currentState === 'inactive') {
           global.__mpxAppCbs.hide.forEach((cb) => {
             cb()
-            global.__mpxAppFocusedState.value = 'hide'
           })
+          global.__mpxAppFocusedState.value = 'hide'
         }
       })
 

diff --git a/packages/core/src/platform/patch/react/getDefaultOptions.ios.js b/packages/core/src/platform/patch/react/getDefaultOptions.ios.js
@@ -1,8 +1,8 @@
-import { useEffect, useLayoutEffect, useSyncExternalStore, useRef, createElement, memo, forwardRef, useImperativeHandle, useContext, createContext, Fragment } from 'react'
+import { useEffect, useLayoutEffect, useSyncExternalStore, useRef, useMemo, createElement, memo, forwardRef, useImperativeHandle, useContext, createContext, Fragment } from 'react'
 import * as ReactNative from 'react-native'
 import { ReactiveEffect } from '../../../observer/effect'
 import { watch } from '../../../observer/watch'
-import { reactive, set } from '../../../observer/reactive'
+import { reactive, set, del } from '../../../observer/reactive'
 import { hasOwn, isFunction, noop, isObject, error, getByPath, collectDataset } from '@mpxjs/utils'
 import MpxProxy from '../../../core/proxy'
 import { BEFOREUPDATE, ONLOAD, UPDATED, ONSHOW, ONHIDE, ONRESIZE } from '../../../core/innerLifecycle'
@@ -278,16 +278,20 @@ const triggerResizeEvent = (mpxProxy) => {
 }
 
 function usePageContext (mpxProxy, instance) {
-  const { routeName, pageId } = useContext(routeContext) || {}
+  const { pageId } = useContext(routeContext) || {}
+
+  instance.getPageId = () => {
+    return pageId
+  }
 
   useEffect(() => {
     let unWatch
     const hasShowHook = hasPageHook(mpxProxy, [ONSHOW, 'show'])
     const hasHideHook = hasPageHook(mpxProxy, [ONHIDE, 'hide'])
     const hasResizeHook = hasPageHook(mpxProxy, [ONRESIZE, 'resize'])
     if (hasShowHook || hasHideHook || hasResizeHook) {
-      if (hasOwn(pageStatusContext, routeName)) {
-        unWatch = watch(() => pageStatusContext[routeName], (newVal) => {
+      if (hasOwn(pageStatusContext, pageId)) {
+        unWatch = watch(() => pageStatusContext[pageId], (newVal) => {
           if (newVal === 'show' || newVal === 'hide') {
             triggerPageStatusHook(mpxProxy, newVal)
           } else if (/^resize/.test(newVal)) {
@@ -301,41 +305,34 @@ function usePageContext (mpxProxy, instance) {
       unWatch && unWatch()
     }
   }, [])
-  instance.getPageId = () => {
-    return pageId
-  }
 }
 
 const pageStatusContext = reactive({})
 let pageId = 0
-function setPageStatus (routeName, val) {
-  set(pageStatusContext, routeName, val)
-}
 
-function usePageStatus (navigation, route) {
+function usePageStatus (navigation, pageId) {
   let isFocused = true
-  setPageStatus(route.name, '')
+  set(pageStatusContext, pageId, '')
   useEffect(() => {
-    setPageStatus(route.name, 'show')
     const focusSubscription = navigation.addListener('focus', () => {
-      setPageStatus(route.name, 'show')
+      pageStatusContext[pageId] = 'show'
       isFocused = true
     })
     const blurSubscription = navigation.addListener('blur', () => {
-      setPageStatus(route.name, 'hide')
+      pageStatusContext[pageId] = 'hide'
       isFocused = false
     })
-
     const unWatchAppFocusedState = watch(global.__mpxAppFocusedState, (value) => {
       if (isFocused) {
-        setPageStatus(route.name, value)
+        pageStatusContext[pageId] = value
       }
     })
 
     return () => {
       focusSubscription()
       blurSubscription()
       unWatchAppFocusedState()
+      del(pageStatusContext, pageId)
     }
   }, [navigation])
 }
@@ -400,7 +397,8 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
     const { Provider, useSafeAreaInsets } = global.__navigationHelper
     const pageConfig = Object.assign({}, global.__mpxPageConfig, currentInject.pageConfig)
     const Page = ({ navigation, route }) => {
-      usePageStatus(navigation, route)
+      const currentPageId = useMemo(() => ++pageId, [])
+      usePageStatus(navigation, currentPageId)
 
       useLayoutEffect(() => {
         navigation.setOptions({
@@ -431,7 +429,7 @@ export function getDefaultOptions ({ type, rawOptions = {}, currentInject }) {
           },
           createElement(routeContext.Provider,
             {
-              value: { routeName: route.name, pageId: ++pageId }
+              value: { pageId: currentPageId }
             },
             createElement(defaultOptions,
               {