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

问题描述：

我在javascript中使用requestFullscreen()为我的用户提供全屏PWA体验，但是我面临的问题是，当用户在移动设备上切换键盘时，屏幕无法滚动，用户必须关闭键盘以填写剩余的信息。这对我的用户体验并不好，我希望像没有全屏模式一样保持滚动活动状态。React.js - 当软键盘打开时隐藏滚动（隐藏视图）？

欢迎任何建议。

//全屏模式

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改变滚动位置，但似乎没有在全屏模式下工作。

答

您可以参考此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也是可用的。

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

相关推荐