修复内容区域高度适应问题

src/components/PageContent.tsx

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

src/components/common/ImageBackground.tsx

@@ -9,7 +9,7 @@
  * @format
  */
 
-import React from 'react'
+import React, { forwardRef } from 'react'
 import {
   View,
   StyleSheet,
@@ -43,11 +43,13 @@ import type { ImageBackgroundProps as _ImageBackgroundProps } from 'react-native
  * ```
  */
 
-interface ImageBackgroundProps extends Omit<_ImageBackgroundProps, 'source'> {
+export type ImageBackgroundType = View
+
+export interface ImageBackgroundProps extends Omit<_ImageBackgroundProps, 'source'> {
   source?: _ImageBackgroundProps['source'] | null
 }
 
-export default ({
+export default forwardRef<View, ImageBackgroundProps>(({
   children,
   style,
   imageStyle,
@@ -55,12 +57,13 @@ export default ({
   importantForAccessibility,
   source,
   ...props
-}: ImageBackgroundProps) => {
+}, ref) => {
   const flattenedStyle = StyleSheet.flatten(style)
   return (
     <View
       accessibilityIgnoresInvertColors={true}
       importantForAccessibility={importantForAccessibility}
+      ref={ref}
       style={style}>
       {
         source == null ? null : (
@@ -90,4 +93,4 @@ export default ({
       {children}
     </View>
   )
-}
+})

src/screens/Home/Views/Search/SearchTypeSelector.tsx

@@ -72,8 +72,8 @@ const styles = createStyle({
     paddingLeft: 2,
     paddingRight: 2,
     // paddingTop: 10,
-    paddingTop: 2,
+    paddingTop: 3,
-    paddingBottom: 2,
+    paddingBottom: 3,
     borderBottomWidth: BorderWidths.normal3,
     // width: 80,
   },

src/screens/Home/Views/Setting/Basic/IsAutoHidePlayBar.js

@@ -1,20 +0,0 @@
-import React, { memo } from 'react'
-import { View } from 'react-native'
-
-import { useGetter, useDispatch } from '@/store'
-
-import CheckBoxItem from '../components/CheckBoxItem'
-import { useTranslation } from '@/plugins/i18n'
-
-export default memo(() => {
-  const { t } = useTranslation()
-  const autoHidePlayBar = useGetter('common', 'autoHidePlayBar')
-  const setAutoHidePlayBar = useDispatch('common', 'setAutoHidePlayBar')
-
-
-  return (
-    <View style={{ marginTop: 5, marginBottom: 15 }}>
-      <CheckBoxItem check={autoHidePlayBar} label={t('setting_basic_auto_hide_play_bar')} onChange={setAutoHidePlayBar} />
-    </View>
-  )
-})

src/screens/Home/Views/Setting/Basic/IsAutoHidePlayBar.tsx

@@ -0,0 +1,31 @@
+import { updateSetting } from '@/core/common'
+import { useI18n } from '@/lang'
+import { createStyle } from '@/utils/tools'
+import React, { memo } from 'react'
+import { View } from 'react-native'
+import { useSettingValue } from '@/store/setting/hook'
+
+
+import CheckBoxItem from '../components/CheckBoxItem'
+
+export default memo(() => {
+  const t = useI18n()
+  const autoHidePlayBar = useSettingValue('common.autoHidePlayBar')
+  const setAutoHidePlayBar = (autoHidePlayBar: boolean) => {
+    updateSetting({ 'common.autoHidePlayBar': autoHidePlayBar })
+  }
+
+  return (
+    <View style={styles.content}>
+      <CheckBoxItem check={autoHidePlayBar} label={t('setting_basic_auto_hide_play_bar')} onChange={setAutoHidePlayBar} />
+    </View>
+  )
+})
+
+
+const styles = createStyle({
+  content: {
+    marginTop: 5,
+    marginBottom: 15,
+  },
+})

src/screens/Home/Views/Setting/Basic/IsStartupAutoPlay.tsx

@@ -26,6 +26,6 @@ export default memo(() => {
 const styles = createStyle({
   content: {
     marginTop: 5,
-    marginBottom: 15,
+    // marginBottom: 15,
   },
 })

src/screens/Home/Views/Setting/Basic/index.tsx

@@ -9,8 +9,8 @@ import FontSize from './FontSize'
 import ShareType from './ShareType'
 import IsAutoTheme from './IsAutoTheme'
 import IsStartupAutoPlay from './IsStartupAutoPlay'
+import IsAutoHidePlayBar from './IsAutoHidePlayBar'
 import DrawerLayoutPosition from './DrawerLayoutPosition'
-// import IsAutoHidePlayBar from './IsAutoHidePlayBar'
 import { useI18n } from '@/lang/i18n'
 
 export default memo(() => {
@@ -22,15 +22,13 @@ export default memo(() => {
       <Theme />
       <IsAutoTheme />
       <IsStartupAutoPlay />
+      <IsAutoHidePlayBar />
       <Source />
       <SourceName />
       <DrawerLayoutPosition />
       <Language />
       <FontSize />
       <ShareType />
-      {/*
-      <IsAutoHidePlayBar />
-       */}
     </Section>
   )
 })

src/screens/Home/components/Main.tsx

@@ -1,11 +1,10 @@
 import React, { useEffect, useMemo, useState } from 'react'
-import { InteractionManager, KeyboardAvoidingView } from 'react-native'
+import { InteractionManager } from 'react-native'
 import Search from '../Views/Search'
 import SongList from '../Views/SongList'
 import Mylist from '../Views/Mylist'
 import Leaderboard from '../Views/Leaderboard'
 import Setting from '../Views/Setting'
-import { createStyle } from '@/utils/tools'
 import commonState, { type InitState as CommonState } from '@/store/common/state'
 
 
@@ -37,23 +36,9 @@ const Main = () => {
     }
   }, [id])
 
-  return (
+  return component
-    <KeyboardAvoidingView
-      behavior="padding"
-      style={styles.container}
-    >
-      {component}
-    </KeyboardAvoidingView>
-  )
 }
 
-const styles = createStyle({
-  container: {
-    flexGrow: 1,
-    flexShrink: 1,
-    // backgroundColor: '#fff',
-  },
-})
 
 export default Main
 

src/screens/Home/components/PlayerBar/index.tsx

@@ -1,6 +1,6 @@
-import React, { memo } from 'react'
+import React, { memo, useMemo } from 'react'
 import { View } from 'react-native'
-// import { useKeyboard } from '@/utils/hooks'
+import { useKeyboard } from '@/utils/hooks'
 
 import Pic from './components/Pic'
 import Title from './components/Title'
@@ -9,17 +9,16 @@ import ControlBtn from './components/ControlBtn'
 import { createStyle } from '@/utils/tools'
 // import { useSettingValue } from '@/store/setting/hook'
 import { useTheme } from '@/store/theme/hook'
+import { useSettingValue } from '@/store/setting/hook'
 
 
 export default memo(() => {
   // const { onLayout, ...layout } = useLayout()
-  // const { keyboardShown } = useKeyboard()
+  const { keyboardShown } = useKeyboard()
   const theme = useTheme()
-  // const autoHidePlayBar = useSettingValue('common.autoHidePlayBar')
+  const autoHidePlayBar = useSettingValue('common.autoHidePlayBar')
 
-  // console.log('render pb')
+  const playerComponent = useMemo(() => (
-
-  return (
     <View style={{ ...styles.container, backgroundColor: theme['c-content-background'] }}>
       <Pic />
       <View style={styles.center}>
@@ -33,7 +32,11 @@ export default memo(() => {
         <ControlBtn />
       </View>
     </View>
-  )
+  ), [theme])
+
+  // console.log('render pb')
+
+  return autoHidePlayBar && keyboardShown ? null : playerComponent
 })
 
 

src/screens/SonglistDetail/PlayerBar/index.tsx

@@ -1,25 +1,24 @@
-import React, { memo } from 'react'
+import React, { memo, useMemo } from 'react'
 import { View } from 'react-native'
-// import { useKeyboard } from '@/utils/hooks'
+import { useKeyboard } from '@/utils/hooks'
 
 import Pic from './Pic'
 import Title from './Title'
 import PlayInfo from './PlayInfo'
 import ControlBtn from './ControlBtn'
 import { createStyle } from '@/utils/tools'
-// import { useSettingValue } from '@/store/setting/hook'
+import { useSettingValue } from '@/store/setting/hook'
 import { useTheme } from '@/store/theme/hook'
 
 
 export default memo(() => {
   // const { onLayout, ...layout } = useLayout()
-  // const { keyboardShown } = useKeyboard()
+  const { keyboardShown } = useKeyboard()
   const theme = useTheme()
-  // const autoHidePlayBar = useSettingValue('common.autoHidePlayBar')
+  const autoHidePlayBar = useSettingValue('common.autoHidePlayBar')
 
   // console.log('render pb')
-
+  const playerComponent = useMemo(() => (
-  return (
     <View style={{ ...styles.container, backgroundColor: theme['c-content-background'] }}>
       <Pic />
       <View style={styles.center}>
@@ -33,7 +32,9 @@ export default memo(() => {
         <ControlBtn />
       </View>
     </View>
-  )
+  ), [theme])
+
+  return autoHidePlayBar && keyboardShown ? null : playerComponent
 })