# 键盘挡住输入框问题(包含 WebView)
# 1, React Native WebView
解决键盘挡住输入框问题(不需要 2)
if(/Android [4-6]/.test(navigator.appVersion)){
window.addEventListener('resize', function(){
if(document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA'){
window.setTimeout(function(){
document.activeElement.scrollIntoViewIfNeeded();
},0);
}
})
}
# 2, React Native
解决键盘挡住输入框问题
import {Keyboard, Dimensions} from 'react-native';
// 屏幕高度
let ScreenHeight = Dimensions.get('window').height;
export default class WebViewPageAndroid extends Component{
constructor(props){
super(props);
this.state = {
webViewHeight: ScreenHeight,
}
}
componentDidMount(){
this.keyboardDidShowListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidShow.bind(this));
this.keyboardDidHideListener = Keyboard.addListener('keyboardDidShow', this._keyboardDidHide.bind(this));
}
compoentWillUnmount(){
this.keyboardDidShowListener.remove();
this.keyboardDidHideListener.remove();
}
_keyboardDidShow(e){
this.setState({webViewHeight: ScreenHeight - e.endCoordinates.height})
}
_keyboardDidHide(e){
this.setState({webViewHeight: ScreenHeight})
}
render(){
return (
<View style={{height: this.state.webViewHeight}}>
<WebView
stylee = {{
height: '100%',
}}
>
</View>
)
}
}