Skip to content

mengft/react-native-keyboardavoidview

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 
 
 
 
 
 
 

Repository files navigation

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 }

About

React-Native 兼容IOS、Android客户端的Form表单防止键盘遮挡组件

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published