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改變滾動位置，但似乎沒有在全屏模式下工作。

來源

2017-06-17 Prateekro

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

來源

2017-06-18 15:37:34 abielita

React.js - 當軟鍵盤打開時隱藏滾動（隱藏視圖）？

回答

相關問題