React Native 解决键盘挡住输入框问题 和 React Native WebView 解决键盘挡住输入框问题

转载请注明预见才能遇见的博客：http://my.csdn.net/

原文地址：https://blog.csdn.net/pcaxb/article/details/84939301

React Native 解决键盘挡住输入框问题  和 React Native 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('keyboardDidHide', this._keyboardDidHide.bind(this));
    }

    componentWillUnmount() {
        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
                style={{
                    height:'100%',
                }}
                />

            </View>
        );
    }
}

说明：React Native WebView的只需要1就能解决，React Native 的组件就用2。

 

React Native 解决键盘挡住输入框问题  和 React Native WebView 解决键盘挡住输入框问题

博客地址：https://blog.csdn.net/pcaxb/article/details/84939301