React Native解决键盘遮挡问题

作者: 光强_上海 | 来源:发表于2017-11-01 00:39 被阅读189次

    前言

    在开发Reactnative的表单页面开发时,我们经常会填写各种表单信息,当我们对文本框进行编辑时,这时就需要弹出键盘,编辑完成时要正常的收起键盘。对于Android平台还好,系统会自动帮我们处理了键盘的弹出和收起。但是对于iOS平台,键盘的弹出和收起需要我们自己去控制,这样就无形的增加了开发难度和效率。今天作者就给大家分享下iOS下如何也能像Android一样的自动管理键盘

    iOS预览效果图

    iOS

    Android预览效果图

    Android

    iOS如何实现自动管理键盘

    • 其实实现方法非常之简单,我们只需要将示例工程中的IQKeyboardManager整个文件夹拖到你自己的iOS工程即可,不需要写一行iOS代码,就是这么简单。
    IQ

    示例Demo项目源码

    https://github.com/guangqiang-liu/react-native-keyboardManager

    总结

    在iOS平台下实现自动管理键盘你只需要将IQKeyboardManager文件夹添加到自己的iOS工程即可,Android平台不需要添加其他库,系统自动处理。

    福利时间

    • 作者React Native开源项目OneM地址(按照企业开发标准搭建框架设计开发):https://github.com/guangqiang-liu/OneM (欢迎小伙伴们 star)
    • 作者简书主页:包含50多篇RN开发相关的技术文章http://www.jianshu.com/u/023338566ca5 (欢迎小伙伴们:多多关注多多点赞)
    • 作者React Native QQ技术交流群:620792950 欢迎小伙伴进群交流学习
    • 友情提示:在开发中有遇到RN相关的技术问题,欢迎小伙伴加入交流群(620792950),在群里提问、互相交流学习。交流群也定期更新最新的RN学习资料给大家,谢谢支持!

    相关文章

      网友评论

      • Obsession丶执:没效果啊,强哥,求解,不想用keyboardAvoidingView:sob:
      • KeepFighting:弱弱的问下,RN提供的keyboardAvoidingView不能解决键盘遮挡问题吗?
        KeepFighting:@光强_上海 了解,3Q~
        光强_上海:@KeepFighting 这个使用自然是没有IQ方便,这个组件还得包一层,
        <KeyboardAvoidingView behavior='padding'>
        <View style={styles.textInputContainer}>
        <TextInput
        value={this.state.data}
        style={styles.textInput}
        onChangeText={this.handleChangeData}
        />
        </View>
        </KeyboardAvoidingView>

      本文标题:React Native解决键盘遮挡问题

      本文链接:https://www.haomeiwen.com/subject/zzxwpxtx.html