[英]Render component after keyboard closes or listen to keyboard close event in react app in cordova android
I am migrating a 'work-in-progress' react.js
application to an android app using cordova
.我正在使用
cordova
将“正在进行的” react.js
应用程序迁移到 android 应用程序。 all seems to work fine except for a component that doesnt render itself peoperly when the keyboard closes, the component generally looks like this.一切似乎都工作正常,除了一个组件在键盘关闭时不会呈现自己,该组件通常看起来像这样。
Now when you click on an input and close it the view re renders just fine:现在,当您单击输入并关闭它时,视图重新渲染得很好:
But once you fill it and close the keyboard the component doesnt re render itself:但是一旦你填充它并关闭键盘,组件就不会重新呈现自己:
the component just gets stuck like that, the easy solution would obviously be to "force render" by setting the state again, the issue is that I cant seem to find a way to listen to keyboard changes on this react-cordova app , also why would the component re render itself when the form is empty but not when its filled?组件就这样卡住了,简单的解决方案显然是通过再次设置 state 来“强制渲染”,问题是我似乎无法找到一种方法来听这个 react-cordova 应用程序上的键盘变化,也是为什么当表单为空时组件是否会重新呈现自己,但在填充时不会?
Hope this helps someone: in the component
: add an empty callback for the window resize event.希望这对某人有所帮助:在
component
中:为 window 调整大小事件添加一个空回调。
useEffect(() => {
window.onresize = function(){
//console.log("resizing");
};
}, []);
as well as adding to cordova config.xml: inside the widget tab
xmlns:android="http://schemas.android.com/apk/res/android"
as a property以及添加到 cordova config.xml:在
widget tab
内xmlns:android="http://schemas.android.com/apk/res/android"
and:和:
<edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application/activity">
<activity android:configChanges="orientation|keyboardHidden" android:windowSoftInputMode="adjustResize" />
</edit-config>
as content of the widget.作为小部件的内容。
also: <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
另外:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
in the <head/>
of public/index.html
在
public/index.html
的<head/>
中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.