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

最新推荐文章于 2024-03-08 14:38:53 发布

预见才能遇见

最新推荐文章于 2024-03-08 14:38:53 发布

阅读量3.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： # ReactNative混合开发文章标签： React Native WebView 输入框被挡住

本文链接：https://blog.youkuaiyun.com/pcaxb/article/details/84939301

ReactNative混合开发专栏收录该内容

10 篇文章

订阅专栏

本文提供了解决ReactNative及ReactNativeWebView中键盘遮挡输入框的问题方案。针对ReactNativeWebView，通过监听屏幕尺寸变化自动调整输入框位置；对于ReactNative组件，利用键盘监听事件动态调整WebView高度，确保输入框始终可见。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

原文地址：https://blog.youkuaiyun.com/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.youkuaiyun.com/pcaxb/article/details/84939301