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

  • Post author:
  • Post category:其他




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项目地址



版权声明:本文为qq_28978893原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。