更新背景高度计算方式

src/components/PageContent.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react'
-import { Dimensions, ImageBackground, type LayoutChangeEvent, View } from 'react-native'
+import { Dimensions, type ScaledSize, View } from 'react-native'
 import { useTheme } from '@/store/theme/hook'
+import ImageBackground from '@/components/common/ImageBackground'
 // import { useDimensions } from '@/utils/hooks'
 
 interface Props {
@@ -11,24 +12,30 @@ interface Props {
 export default ({ children }: Props) => {
   const theme = useTheme()
   // const { window } = useDimensions()
-  const [wh, setWH] = useState<{ width: number | string, height: number | string }>({ width: '100%', height: '100%' })
+  const [wh, setWH] = useState<{ width: number | string, height: number | string }>({ width: '100%', height: Dimensions.get('screen').height })
 
   // 固定宽高度 防止弹窗键盘时大小改变导致背景被缩放
   useEffect(() => {
-    const onChange = () => {
-      setWH({ width: '100%', height: '100%' })
+    const onChange = (event: {
+      window: ScaledSize
+      screen: ScaledSize
+    }) => {
+      setWH({ width: '100%', height: event.screen.height })
     }
 
     const changeEvent = Dimensions.addEventListener('change', onChange)
     return () => { changeEvent.remove() }
   }, [])
-  const handleLayout = (e: LayoutChangeEvent) => {
-    setWH({ width: e.nativeEvent.layout.width, height: e.nativeEvent.layout.height })
-  }
+  // const handleLayout = (e: LayoutChangeEvent) => {
+  //   console.log(e.nativeEvent)
+  //   console.log(Dimensions.get('screen'))
+  //   setWH({ width: e.nativeEvent.layout.width, height: e.nativeEvent.layout.height })
+  // }
+  // console.log('render page content')
 
   return (
     <ImageBackground
-      onLayout={handleLayout}
+      // onLayout={handleLayout}
       style={{ height: wh.height, width: wh.width, backgroundColor: theme['c-content-background'] }}
       source={theme['bg-image']}
       resizeMode="cover"

src/components/common/ImageBackground.tsx

@@ -0,0 +1,93 @@
+// https://github.com/facebook/react-native/blob/main/packages/react-native/Libraries/Image/ImageBackground.js
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow
+ * @format
+ */
+
+import React from 'react'
+import {
+  View,
+  StyleSheet,
+  Image,
+} from 'react-native'
+import type { ImageBackgroundProps as _ImageBackgroundProps } from 'react-native'
+
+
+/**
+ * Very simple drop-in replacement for <Image> which supports nesting views.
+ *
+ * ```ReactNativeWebPlayer
+ * import React, { Component } from 'react';
+ * import { AppRegistry, View, ImageBackground, Text } from 'react-native';
+ *
+ * class DisplayAnImageBackground extends Component {
+ *   render() {
+ *     return (
+ *       <ImageBackground
+ *         style={{width: 50, height: 50}}
+ *         source={{uri: 'https://reactnative.dev/img/opengraph.png'}}
+ *       >
+ *         <Text>React</Text>
+ *       </ImageBackground>
+ *     );
+ *   }
+ * }
+ *
+ * // App registration and rendering
+ * AppRegistry.registerComponent('DisplayAnImageBackground', () => DisplayAnImageBackground);
+ * ```
+ */
+
+interface ImageBackgroundProps extends Omit<_ImageBackgroundProps, 'source'> {
+  source?: _ImageBackgroundProps['source'] | null
+}
+
+export default ({
+  children,
+  style,
+  imageStyle,
+  imageRef,
+  importantForAccessibility,
+  source,
+  ...props
+}: ImageBackgroundProps) => {
+  const flattenedStyle = StyleSheet.flatten(style)
+  return (
+    <View
+      accessibilityIgnoresInvertColors={true}
+      importantForAccessibility={importantForAccessibility}
+      style={style}>
+      {
+        source == null ? null : (
+          <Image
+            {...props}
+            source={source}
+            importantForAccessibility={importantForAccessibility}
+            style={[
+              StyleSheet.absoluteFill,
+              {
+                // Temporary Workaround:
+                // Current (imperfect yet) implementation of <Image> overwrites width and height styles
+                // (which is not quite correct), and these styles conflict with explicitly set styles
+                // of <ImageBackground> and with our internal layout model here.
+                // So, we have to proxy/reapply these styles explicitly for actual <Image> component.
+                // This workaround should be removed after implementing proper support of
+                // intrinsic content size of the <Image>.
+                width: flattenedStyle?.width,
+                height: flattenedStyle?.height,
+              },
+              imageStyle,
+            ]}
+            ref={imageRef}
+          />
+        )
+      }
+      {children}
+    </View>
+  )
+}