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，已弃用，请改用<{1}}
- 'never'，已弃用，请改用<{1}}

以下是示例代码：react-native-keyboard-aware-scroll-view。您可以使用true或'always'组件。两者都接受KeyboardAwareScrollView和KeyboardAwareListView默认道具并实现自定义ScrollView来处理键盘外观。如果要在任何其他组件中使用mixin，也可以使用mixin。

React.js - 当软键盘打开（隐藏视图）时滚动处于非活动状态？

1 个答案: