# 键盘挡住输入框问题(包含 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>
        )
    }
}