欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  移动技术

react-native 键盘遮挡输入框

程序员文章站 2022-06-20 20:55:25
Android上已经自动对键盘遮挡输入框做了处理,所以我们只需要关注ios。 1.首先引入 KeyboardAvoidingView 2.然后在页面的最外层加上 KeyboardAvoidingView 如果适配ios和Android,可以将页面提取出来 ......

android上已经自动对键盘遮挡输入框做了处理,所以我们只需要关注ios。

1.首先引入 keyboardavoidingview

import { keyboardavoidingview } from 'react-native';

2.然后在页面的最外层加上 keyboardavoidingview

render(){
    return <keyboardavoidingview behavior={'padding'} style={{flex: 1}}>
        {/*具体页面内容*/}
    </keyboardavoidingview>
}

如果适配ios和android,可以将页面提取出来

    getpageview = () => {
        //return 具体页面内容
    }
    getplatformview = () => {
        if (platform.os === 'ios') {
            return <keyboardavoidingview behavior={'padding'} style={{flex: 1}}>
                    {this.getpageview()}
            </keyboardavoidingview>
        } else {
            return this.getpageview();
        }
    };

    render() {
        return this.getplatformview();
    }