1.0.0 • Published 6 years ago

react-native-keyboardavoidview v1.0.0

Weekly downloads
2
License
ISC
Repository
github
Last release
6 years ago

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

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