Question

我在使用Cordova为Android构建的ReactJS应用程序中具有简单的登录表单。但是，通过打开键盘，大部分电子邮件输入和所有密码输入都被它完全阻止了。当前是这样的：

在这个示例中，我知道带有星星的空白区域看起来很傻，但是必须将其保留在那里（它是徽标和图像的占位符）。

这可以通过添加一些填充来解决，我只需向下滚动即可，但这会产生额外的无用空间，我仍然很好奇为什么会首先发生这种情况。

这是我的代码大致的样子：

class Signin extends React.PureComponent {
  render () {
    return (
      <div className='container container-xs text-center'>
        <form onSubmit={onSubmit} role='form' className='form'>
          <div className='form-group text-left'>
            <label className='control-label'>Email</label>
            <input
              type='text'
              className='form-control'
              value={email}
              onChange={evt => setEmail(evt.target.value)}
            />
          </div>
          <div className='form-group text-left'>
            <label className='control-label'>Password</label>
              <input
                type='password'
                className='form-control'
                value={password}
                onChange={evt => setPassword(evt.target.value)}
              />
          </div>
          <button>Sign in</button>
        </form>
      </div>
    )
  }
}

有什么可以做的，以便它自动滚动吗？请记住，这仅在Android应用程序中发生。 iOS的行为符合预期。

Answer 1

此Android设置在AndroidManifest.xml文件中设置。它应该位于您的platforms/android文件夹中。在其中，您应该看到一个activity标记，其中可能包含以下某些属性：android:configChanges，android:label，android:launchMode，android:windowSoftInputMode

我们想将android:windowSoftInputMode的值更改为android:windowSoftInputMode="adjustResize"

adjustResize的描述为The activity's main window is always resized to make room for the soft keyboard on screen.

您可以在以下位置了解有关AndroidManifest.xml中的活动元素的更多信息：activity element docs

打开Android键盘时，Cordova应用程序表单无法向上滚动

1 个答案: