react-native KeyboardAvoidingView在Android上无限更新

mepcadol  于 4个月前  发布在  React
关注(0)|答案(4)|浏览(71)

描述

KeyboardAvoidingView 组件在Android上的底部状态无限更新。当在React Native DevTools中检查KeyboardAvoidingView的状态时,这是可见的,它会不断更改值。或者当一个组件刚好位于键盘上方时,它会 Flink 和/或上下跳动。

重现步骤

前提条件
  1. 从reproducer仓库构建并打开应用程序。重现1位于分支example-1上。重现2位于分支example-2上。对于每个分支,请检出yarn install,然后检出yarn android
  2. React Native DevTools正在运行。
重现1

重现1是一个文本输入框,底部固定在一个 KeyboardAvoidingView 中。尽管底部状态在改变,但变化非常小(<1 px),因此在UI中不明显。

步骤
  1. 在React Native DevTools中检查 KeyboardAvoidingView
  2. 将焦点放在应用程序中的文本输入框上。
  3. 在DevTools中检查 bottom 状态。
  4. 在应用程序中取消文本输入框的焦点。
  5. 在DevTools中检查 bottom 状态。
预期行为

bottom 状态不应持续更改。

实际行为

bottom 状态持续更改。

重现2

重现2与重现1相同,但有两个屏幕来显示UI上底部状态更改的影响,因为底部状态更改要大得多。

步骤
  1. 将焦点放在应用程序中的文本输入框上。
  2. 点击“转到屏幕2”。
  3. 在React Native DevTools中检查 Screen2KeyboardAvoidingView 状态。
预期行为

bottom 状态不应持续更改。页脚不应 Flink 。

实际行为

bottom 状态持续更改。页脚 Flink 。

React Native版本

0.74.2

受影响的平台

运行时- Android

huwehgph

huwehgph2#

嗯,我不知道这是否有什么关联,但在从0.73^升级到0.74^之后,Android上的windowSoftInputMode / KeyboardAvoidingView不再正常工作:
RN 0.73^
3b561391-ed1f-4f8a-a8c7-8cf85396f44a.mov
RN 0.74^
a3964de7-7a76-48b7-90bf-2bc3c927a129.mov
看起来是一个严重的问题,但需要更多时间来制作干净的复现。

rpppsulh

rpppsulh3#

这也是我们应用的一个问题——Android键盘似乎具有一个不断变化的高度。这导致了我们在应用中有一个自定义模态框,它根据键盘高度和是否可见来重新定位自己。在iOS上运行良好(因为键盘高度是恒定的)。但是,由于Android键盘高度不断变化,我们的应用在使用这个错误时崩溃:

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

这是我们用来跟踪键盘高度的代码片段,以便我们可以重新定位模态框(通过在模态框底部边距上启动动画,使其与键盘高度匹配,或者如果键盘不可见,则为0)。

const [_isKeyboardVisible, setKeyboardVisible] = useState(false)
    const [_keyboardHeight, setKeyboardHeight] = useState(0)

    useEffect(() => {
        const showSubscription = Keyboard.addListener('keyboardDidShow', e => _updateKeyboardData(e, true))
        const hideSubscription = Keyboard.addListener('keyboardDidHide', e => _updateKeyboardData(e, false))
    
        return () => {
          showSubscription.remove()
          hideSubscription.remove()
        }
    }, [])

    const _updateKeyboardData = (e, isVisible) => {
        setKeyboardHeight(isVisible ? e.endCoordinates?.height : 0)
        setKeyboardVisible(isVisible)
    }
gc0ot86w

gc0ot86w4#

对不起,我忘了提到这个问题可能是由于键盘的实际高度发生变化,而不是KeyboardAvoidingView组件引起的。

相关问题