修复键盘弹出时背景图片出现缩放的问题

This commit is contained in:
lyswhut 2023-12-29 20:37:26 +08:00
parent 4a13c90f62
commit 4cddb9c947

View File

@ -1,16 +1,18 @@
import { memo, useCallback, useRef } from 'react' import { memo, useCallback, useRef, useEffect } from 'react'
import { type LayoutChangeEvent, StyleSheet, View, StatusBar } from 'react-native' import { type LayoutChangeEvent, StyleSheet, View, StatusBar, Dimensions } from 'react-native'
import commonState from '@/store/common/state' import commonState from '@/store/common/state'
import { setStatusbarHeight } from '@/core/common' import { setStatusbarHeight } from '@/core/common'
import { windowSizeTools, getWindowSize } from '@/utils/windowSizeTools' import { windowSizeTools, getWindowSize } from '@/utils/windowSizeTools'
export default memo(() => { export default memo(() => {
// const viewRef = useRef<View>(null)
const currentHeightRef = useRef(commonState.statusbarHeight) const currentHeightRef = useRef(commonState.statusbarHeight)
const dimensionsChangedRef = useRef(true)
const handleLayout = useCallback(({ nativeEvent: { layout } }: LayoutChangeEvent | { nativeEvent: { layout: { width: number, height: number } } }) => { const handleLayout = useCallback(({ nativeEvent: { layout } }: LayoutChangeEvent | { nativeEvent: { layout: { width: number, height: number } } }) => {
// console.log('handleLayout') // console.log('handleLayout')
if (!dimensionsChangedRef.current) return
void getWindowSize().then(size => { void getWindowSize().then(size => {
dimensionsChangedRef.current = false
// console.log(layout, size) // console.log(layout, size)
const height = parseFloat(size.height.toFixed(2)) >= parseFloat(layout.height.toFixed(2)) const height = parseFloat(size.height.toFixed(2)) >= parseFloat(layout.height.toFixed(2))
? 0 ? 0
@ -27,18 +29,23 @@ export default memo(() => {
} }
}) })
}, []) }, [])
// useEffect(() => { useEffect(() => {
// let timeout: NodeJS.Timeout | null = null // let timeout: NodeJS.Timeout | null = null
// Dimensions.addEventListener('change', () => { const subscription = Dimensions.addEventListener('change', () => {
// if (timeout) clearTimeout(timeout) dimensionsChangedRef.current = true
// timeout = setTimeout(() => { // if (timeout) clearTimeout(timeout)
// timeout = null // timeout = setTimeout(() => {
// viewRef.current?.measureInWindow((x, y, width, height) => { // timeout = null
// handleLayout({ nativeEvent: { layout: { width, height } } }) // viewRef.current?.measureInWindow((x, y, width, height) => {
// }) // handleLayout({ nativeEvent: { layout: { width, height } } })
// }, 100) // })
// }) // }, 100)
// }, []) })
return () => {
subscription.remove()
}
}, [])
return (<View style={StyleSheet.absoluteFill} onLayout={handleLayout} />) return (<View style={StyleSheet.absoluteFill} onLayout={handleLayout} />)
}, () => true) }, () => true)