React.js - 打开软键盘时滚动无效（隐藏视图）？

Question

我在 javascript 中使用 requestFullscreen() 为我的用户提供全屏 PWA 体验，但我面临的问题是当用户在移动设备上切换键盘时，屏幕不可滚动，用户必须关闭键盘以填写剩余信息。这对我的用户体验不利，我想保持滚动活动，就像没有全屏模式一样。

欢迎提出任何建议。

//全屏模式

addEventListenerOnce( document.body, "click", function(e) {
        var el = document.documentElement;
        if(el.requestFullscreen) {
            rfs = el.requestFullscreen;
        } else if(el.mozRequestFullScreen) {
            rfs = el.mozRequestFullScreen;
        } else if(el.webkitRequestFullscreen) {
            rfs = el.webkitRequestFullscreen;
        } else if(el.msRequestFullscreen) {
            rfs =el.msRequestFullscreen;
        }    
        rfs.call(el);
    });

我尝试了很多 JS 来更改滚动位置，但在全屏模式下似乎没有任何效果。

Answer 1

您可以参考这个documentation。您可以使用：

keyboardDismissMode?: PropTypes.oneOf([
  'none', // default
  'interactive',
  'on-drag',
]) #

• 确定键盘是否响应拖动而解除。 - 'none'（默认），拖动不会关闭键盘。 - 'on-drag'，当拖动开始时键盘被关闭。 - 'interactive'，键盘通过拖动交互解除并与触摸同步移动；向上拖动取消解雇。

或者

keyboardShouldPersistTaps?: PropTypes.oneOf([
  'always', 
  'never', 
  'handled', 
  false, 
  true
]) #

• 确定键盘在点击后何时保持可见。

  • 'never'（默认），当键盘向上时，在焦点文本输入之外点击会关闭键盘。发生这种情况时，孩子们不会收到点击。
  • 'always'，键盘不会自动关闭，滚动视图不会捕捉到点击，但滚动视图的子视图可以捕捉到点击。
  • 'handled'，当孩子处理敲击（或被祖先捕获）时，键盘不会自动关闭。
  • false，已弃用，请改用 'never'
  • true，已弃用，请改用 'always'

这里有一个示例代码：react-native-keyboard-aware-scroll-view。您可以使用KeyboardAwareScrollView 或KeyboardAwareListView 组件。两者都接受ScrollView 和ListView 默认道具并实现自定义KeyboardAwareMixin 来处理键盘外观。如果您想在任何其他组件中使用 mixin，也可以使用它。