基于React Native封装的表单提交Container，用于替代RN官方组件KeyboardAvoidingView(不兼容Android)react-native-keyboardavoidv

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_28978893/article/details/82790579

react-native-keyboardavoidview

基于React Native封装的表单提交Container，用于替代RN官方组件KeyboardAvoidingView(不兼容Android)

Theory

重写TextInput的onFocus方法，借助ScrollView的scrollResponderScrollNativeHandleToKeyboard实现屏蔽键盘遮挡FormItem的情况。

Installation

npm install react-native-keyboardavoidview --save

Import into your project

import KeyboardAvoidingView from 'react-native-keyboardavoidview';

Examle useage

<KeyboardAvoidingView>
    <TextInput style={Styles.textInput} placeholder='课程标题' placeholderTextColor={Colors.C5} />
    <TextInput style={Styles.textInput} placeholder='简介' placeholderTextColor={Colors.C5} />
    <TextInput style={Styles.textInput} placeholder='人数上限' placeholderTextColor={Colors.C5} keyboardType='numeric' />
    <TextInput style={Styles.textInput} placeholder='课程标题' placeholderTextColor={Colors.C5} />
    <TextInput style={Styles.textInput} placeholder='简介' placeholderTextColor={Colors.C5} />
    <TextInput style={Styles.textInput} placeholder='活动地点' placeholderTextColor={Colors.C5} />
</KeyboardAvoidingView>

Properties

属性	描述	类型	默认
style	container样式	PropTypes.oneOfType([ ViewPropTypes.style, PropTypes.number ])	{ flex: 1, backgroundColor: '#F7F7F7', paddingLeft: 15 }

GitHub项目地址