react native KeyboardAwareScrollView或者KeyboardAvoidingView失效问题解决

1、示例正确案例：

export default class  ConnectServicePage  extends Component{state = {behavior: 'padding',};render() {return (<View style={styles.container}><KeyboardAvoidingView behavior="padding" style={styles.container}><Image  source={require('../../assets/serve/Illustration_serve.png')} style={{marginTop: px2dp(100)}}/><TextInputunderlineColorAndroid={'#ffffff'}placeholder="这里是一个简单的输入框"style={styles.textInput} /></KeyboardAvoidingView></View>);}};const styles = StyleSheet.create({container: {flex: 1,backgroundColor:'white',justifyContent: 'center',paddingHorizontal: 20,paddingTop: 20,},textInput: {borderRadius: 5,borderWidth: 1,height: 140,paddingHorizontal: 10,},
});

2、KeyboardAwareScrollView或者KeyboardAvoidingView的子控件顶部为一张大图片，图片下部为输入框，这时会出现输入框被遮挡的问题。这是有子控件的justifyContent不是 'center'导致，例如是：'space-between'，就会出现问题。

当KeyboardAwareScrollView控件时指定指定子控件的属性，例如使用了该控件的contentContainerStyle的属性。这时需要注意，该属性的styles中的justifyContent也不能使用'space-between'。只能下面这样：

keyboardAwareScrollViewStyle:{alignItems: 'center',justifyContent: 'center',flex: 1,}

<KeyboardAwareScrollView style={contentContainerStyle={styles.keyboardAwareScrollViewStyle}behavior="padding">

react native KeyboardAwareScrollView或者KeyboardAvoidingView失效问题解决相关推荐

[RN] React Native 键盘管理在Android TextInput遮盖，上移等问题解决办法
[RN] React Native 键盘管理在Android TextInput遮盖,上移等问题解决办法参考文章: (1)[RN] React Native 键盘管理在Android TextI ...
android input 点击事件失效,React Native：TextInput元素上的onContentSizeChange事件在Android上不起作用...
我在Android设备上的TextInput事件'onContentSizeChange'出现问题. 实际上,当我输入消息直到行尾并且文本进入下一行时,TextInput的高度不会更新.React N ...
开源一个天气APP Build with React Native
About Github 断断续续花了几天的时间,利用网上开放的小米天气接口,基于React native 写了一个天气APP.App store 在审核中.设计能力有限,天气动画只加了两个,AE导出 ...
React Native开发错误警告处理总结（已解决！持续更新）
注:本文是我在开发过程中遇到问题解决方法的总结,之后会持续更新,希望帮助到更多的学习者.文中有不妥的地方希望指出共同学习,同时欢迎大神补充.(之后我会放出自己开发整理的笔记和GithubDemo地址, ...
React Native系列(6) - 编译安卓私有React-Native代码
为何要自己编译React Native安卓私有代码我们在开发中遇到一个HTTP2的问题,React Native安卓客户端在和HTTP2支持的服务器通讯的过程中会有crash,见 React-Nat ...
React Native中pointerEvent属性
在React Native界面开发中, 如果使用绝对定位布局,在代码运行时的某个时刻有可能会遮盖住它的下方的某个组件.这是因为绝对定位只是说这个组件的位置由它父组件的边框决定. 绝对定位的组件可以被认 ...
小谈React、React Native、React Web
React有三个东西,React JS 前端Web框架,React Native 移动终端Hybrid框架,React Web是一个源码转换工具(React Native 转 Web,并之所以特别提出 ...
react native 0.56.0
2019独角兽企业重金招聘Python工程师标准>>> 0.56.0 更新日志能力有限,如有问题,请包涵(哈哈)原文请点击欢迎 React Native 2018年6月份正式版的 ...
React Native 二常用组件与开源组件
2019独角兽企业重金招聘Python工程师标准>>> #0.手把手教React Native实战之开山篇##作者简介东方耀 Android开发RN技术 facebookgithub ...

react native KeyboardAwareScrollView或者KeyboardAvoidingView失效问题解决

react native KeyboardAwareScrollView或者KeyboardAvoidingView失效问题解决相关推荐

最新文章

热门文章