描述
KeyboardAvoidingView
组件在Android上的底部状态无限更新。当在React Native DevTools中检查KeyboardAvoidingView
的状态时,这是可见的,它会不断更改值。或者当一个组件刚好位于键盘上方时,它会 Flink 和/或上下跳动。
重现步骤
前提条件
- 从reproducer仓库构建并打开应用程序。重现1位于分支
example-1
上。重现2位于分支example-2
上。对于每个分支,请检出yarn install
,然后检出yarn android
。 - React Native DevTools正在运行。
重现1
重现1是一个文本输入框,底部固定在一个 KeyboardAvoidingView
中。尽管底部状态在改变,但变化非常小(<1 px),因此在UI中不明显。
步骤
- 在React Native DevTools中检查
KeyboardAvoidingView
。 - 将焦点放在应用程序中的文本输入框上。
- 在DevTools中检查
bottom
状态。 - 在应用程序中取消文本输入框的焦点。
- 在DevTools中检查
bottom
状态。
预期行为
bottom
状态不应持续更改。
实际行为
bottom
状态持续更改。
重现2
重现2与重现1相同,但有两个屏幕来显示UI上底部状态更改的影响,因为底部状态更改要大得多。
步骤
- 将焦点放在应用程序中的文本输入框上。
- 点击“转到屏幕2”。
- 在React Native DevTools中检查
Screen2
的KeyboardAvoidingView
状态。
预期行为
bottom
状态不应持续更改。页脚不应 Flink 。
实际行为
bottom
状态持续更改。页脚 Flink 。
React Native版本
0.74.2
受影响的平台
运行时- Android
4条答案
按热度按时间8dtrkrch1#
Potentially related issues:
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
看起来是一个严重的问题,但需要更多时间来制作干净的复现。
rpppsulh3#
这也是我们应用的一个问题——Android键盘似乎具有一个不断变化的高度。这导致了我们在应用中有一个自定义模态框,它根据键盘高度和是否可见来重新定位自己。在iOS上运行良好(因为键盘高度是恒定的)。但是,由于Android键盘高度不断变化,我们的应用在使用这个错误时崩溃:
这是我们用来跟踪键盘高度的代码片段,以便我们可以重新定位模态框(通过在模态框底部边距上启动动画,使其与键盘高度匹配,或者如果键盘不可见,则为0)。
gc0ot86w4#
对不起,我忘了提到这个问题可能是由于键盘的实际高度发生变化,而不是KeyboardAvoidingView组件引起的。