当键盘出现在iOS上时

发布于 2025-01-26 06:52:35 字数 1404 浏览 4 评论 0原文

问题：WebView的高度不会降低iOS上的键bor时

，我使用了keyboardAvoidingView包装我的webview像这样

<KeyboardAvoidingView
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
  style={isKeyboardOpen ? {
  backgroundColor: 'rgba(0,0,0,0.3)',
  position: 'absolute',
  left: webViewConfig.x,
  top: webViewConfig.show ? y : deviceHeight,
  width: deviceWidth - webViewConfig.x,
  height: deviceHeight - y - keyboardHeight,
  } : {
  backgroundColor: 'rgba(0,0,0,0.3)',
  position: 'absolute',
  left: webViewConfig.x,
  top: webViewConfig.show ? y : deviceHeight,
  width: deviceWidth - webViewConfig.x,
  height:
  deviceHeight - y
  }}
>
  // webivew here
</KeyboardAvoidingView>

我偶尔当隐藏/出现键盘时，使keyboardAvoidingView的高度动态更改。

请检查下图。我想让红色部分消失。或至少使WebView的内容适合容器的空间（keyboardAvoidingView组件），并使其无法向下滚动。

屏幕截图/视频：

我添加style = {{backgroundColor：'red'}}中的weview。如您所见，Webview的内容被封装为Exepeped，但Red Bacground仍然出现。

环境：

OS：iOS
OS版本：15.4.1
React-Native版本：0.64.2
React-native-webview版本：11.2.3

原文

Problem: The height of webview doesn't reduce when I open up the keyborad on IOS

I used a KeyboardAvoidingView wrap my Webview like this

<KeyboardAvoidingView
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
  style={isKeyboardOpen ? {
  backgroundColor: 'rgba(0,0,0,0.3)',
  position: 'absolute',
  left: webViewConfig.x,
  top: webViewConfig.show ? y : deviceHeight,
  width: deviceWidth - webViewConfig.x,
  height: deviceHeight - y - keyboardHeight,
  } : {
  backgroundColor: 'rgba(0,0,0,0.3)',
  position: 'absolute',
  left: webViewConfig.x,
  top: webViewConfig.show ? y : deviceHeight,
  width: deviceWidth - webViewConfig.x,
  height:
  deviceHeight - y
  }}
>
  // webivew here
</KeyboardAvoidingView>

I even make the height of KeyboardAvoidingView is dynamically change when the keyboard is hidden/appeared.

Please check the image below. I'd like to make the red section is dissapeared. Or at least make the content of webview fit into the container's space (which is KeyboardAvoidingView component) and make it unable to scroll down.

Screenshots/Videos:

Image from iOS

I add style={{ backgroundColor: 'red' }} into Weview. As you can see that the webview's content is shirnked as exepected but the red bacground still appear.

Environment:

OS: IOS
OS version: 15.4.1
react-native version: 0.64.2
react-native-webview version: 11.2.3

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

佞臣 2025-02-02 06:52:35

就我而言。我需要防止WebView滚动。有一个属性，称为scrolenabled的WebView组件的属性。代码看起来像这样

<KeyboardAvoidingView
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
  style={{
  backgroundColor: 'rgba(0,0,0,0.3)',
  position: 'absolute',
  left: webViewConfig.x,
  top: webViewConfig.show ? y : deviceHeight,
  width: deviceWidth - webViewConfig.x,
  height: deviceHeight - y
  }}
>
  <Webview 
    // other properties 
    scrollEnabled={false} // -> set this to false
  />
</KeyboardAvoidingView>

In my case. I need to prevent the webview from scrolling. There is a property called scrollEnabled of the WebView component that does that. The codes will look like this

<KeyboardAvoidingView
  behavior={Platform.OS === 'ios' ? 'padding' : 'height'}
  style={{
  backgroundColor: 'rgba(0,0,0,0.3)',
  position: 'absolute',
  left: webViewConfig.x,
  top: webViewConfig.show ? y : deviceHeight,
  width: deviceWidth - webViewConfig.x,
  height: deviceHeight - y
  }}
>
  <Webview 
    // other properties 
    scrollEnabled={false} // -> set this to false
  />
</KeyboardAvoidingView>

回复收藏 0 原文

~没有更多了~