WebView鍵盤React Native

Question

當我選擇一個文本字段並且出現鍵盤時，它會破壞布局，以防它抬高頁面，但是當鍵盤消失時，頁面會繼續抬高

我的WebView代碼：

<WebView
  renderLoading={this.renderLoading}
  startInLoadingState
  source={{uri: 'http://chatats.atsinformatica.com.br/chat/'}}
  style={{marginTop: 100}}
  scalesPageToFit={false}
  scrollEnabled={false}
  automaticallyAdjustContentInsets={false}
  javaScriptEnabledAndroid={true}
  injectedJavaScript={`
  $('form:first').css('max-width', '100%');
  $('form:first').css('width', '100%');
  $('div:first').removeClass("wrapper");
  $('form:first').css('position', 'unset');
  $('form:first').css('padding-bottom', '100%');`}/>

Answer 1

請添加$('body').scrollTop({0}); 在InjectionJavaScript中，如下所示

<WebView
  renderLoading={this.renderLoading}
  startInLoadingState
  source={{uri: 'http://chatats.atsinformatica.com.br/chat/'}}
  style={{marginTop: 100}}
  scalesPageToFit={false}
  scrollEnabled={false}
  automaticallyAdjustContentInsets={false}
  javaScriptEnabledAndroid={true}
  injectedJavaScript={`
  $('form:first').css('max-width', '100%');
  $('form:first').css('width', '100%');
  $('div:first').removeClass("wrapper");
  $('form:first').css('position', 'unset');
  $('form:first').css('padding-bottom', '100%');
  $('body').scrollTop({0});`
 }
/>

這解決了你的問題

如果您想對它執行某些功能，也可以在react native中獲得Keyboard hide / show方法

    Keyboard.addListener('keyboardDidShow',(frames)=>{
      this.setState({keyboardSpace: 0});
    });
    Keyboard.addListener('keyboardWillHide',(frames)=>{
      this.setState({keyboardSpace:0});
    });