键盘隐藏Android内容React Native webview

Question

我正在使用React Native的<WebView>组件。

documentation没有提到如何处理隐藏webview的键盘，当webview的HTML包含一个<input>，它将成为Android中的焦点。

有没有人设法解决这个问题？ 我发现了一个图书馆，似乎适用于正常<View>，但不是<WebView>。

Answer 1

你有没有想过响应键盘出现和消失的系统级事件，然后适当调整WebView大小？

关于如何处理这个问题有一个老问题，它可能会或可能不会相关。这个答案特别说明了如何处理键盘事件。 https://stackoverflow.com/a/33585501/1403

DeviceEventEmitter.addListener('keyboardDidShow',(frames)=>{ 
    if (!frames.endCoordinates) return; 
    this.setState({keyboardSpace: frames.endCoordinates.height}); 
}); 
DeviceEventEmitter.addListener('keyboardWillHide',(frames)=>{ 
    this.setState({keyboardSpace:0}); 
}); 

您可以使用frames.endCoordinates.height值来改变你的WebView的高度，确保内容不会隐藏在键盘后面。

Answer 2

只是提高认识，这也可以通过使用react-native-keyboard-spacer简单地实现，如果你不是在复杂的键盘控制。

import KeyboardSpacer from 'react-native-keyboard-spacer'; 

class DemoApp extends Component { 
    render() { 
    return (
     <View> 
     <WebView ... /> 
     <KeyboardSpacer/> 
     </View> 
    ); 
    } 
}