react-Native键盘收起、textInput键盘遮挡问题

点击界面任意处键盘收起

import {
    Keyboard,
    TouchableOpacity,
} from 'react-native';
 <TouchableOpacity 
onPress={() => { Keyboard.dismiss(); }} 
activeOpacity={1} style={{flex: 1}}>
            </TouchableOpacity >

键盘遮挡问题:
1.使用KeyboardAvoidingView

import {KeyboardAvoidingView} from 'react-native';
 @observable top = getPixel(100);
 <ScrollView>
                        <KeyboardAvoidingView behavior='position' keyboardVerticalOffset={this.top}>
                            <LoginInput 
                                onFocus={() => { this.top = getPixel(40); }}/>
                            <LoginInput 
                                onFocus={() => { this.top = getPixel(100); }}/>
                            <LoginInput
                                onFocus={() => { this.top = getPixel(100); }}/>
                        </KeyboardAvoidingView>
                    </ScrollView>

LoginInput.js

onFocus=() => {
        const {onFocus} = this.props;
        onFocus && onFocus();
    }

render(){
    return(
            <TextInput onFocus={this.onFocus}/>
    )
}

2.使用第三方库:KeyboardAwareScrollView

 import {KeyboardAwareScrollView} from 'react-native-keyboard-aware-scroll-view';
 <KeyboardAwareScrollView
                    extraHeight={140}
                    keyboardOpeningTime={10}
                    style={{
                        marginTop: getTitlePixel(64),
                    }}>
<View></View>
</KeyboardAwareScrollView>

参考借鉴:
KeyboardAwareScrollView详细见react-native-keyboard-aware-scroll-view git

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容