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

请在injectJavaScript中添加$('body').scrollTop({0});，例如关注

<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});`
 }
/>

这解决了你的问题

如果你想对它做一些功能，你也可以在本机中获取键盘隐藏/显示方法

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