react-native 键盘遮挡输入框

Posted 2022-06-23 bygw

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();