RN-第三方之react-native-keyboard-aware-scroll-view解决键盘挡住输入框问题

react-native-keyboard-aware-scroll-view

适用于 scrollView、ListView、FlatList、SectionList 上有输入框的问题

• 解决键盘挡住输入框问题
• 点击按钮让scrollView滚动到指定位置

Installation

npm i react-native-keyboard-aware-scroll-view --save

Usage

import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'

render() {
        return (
            
                {
                                      this.refs.scroll.scrollToPosition(0, 0, true) // 滚动到具体的位置
                                      //this.refs.scroll.scrollToEnd(animated: true); 滚动到底部
                                  }}
                >
                    
                        点击按钮，KeyboardAwareScrollView 滚动到顶部
                    
                
                 {
                                             console.log('键盘弹出时，键盘高度改变时：', frames)
                                         }}

                >
                    
                         {
                                   }} placeholder='textInput 1'/>
                         {
                                   }} placeholder='textInput 2'/>
                         {
                                   }} placeholder='textInput 3'/>
                         {
                                   }} placeholder='textInput 4'/>
                         {
                                   }} placeholder='textInput 5'/>
                         {
                                   }} placeholder='textInput 6'/>
                         {
                                   }} placeholder='textInput 7'/>
                         {
                                   }} placeholder='textInput 8'/>
                         {
                                   }} placeholder='textInput 9'/>
                         {
                                   }} placeholder='textInput 10'/>
                         {
                                   }} placeholder='textInput 11'/>
                         {
                                   }} placeholder='textInput 12'/>
                         {
                                   }} placeholder='textInput 13'/>

                    
                

            
        );

697E01BB-A40E-4B2E-AA66-BFFDEA70A92A.png

QQ20170918-182124.gif

官网demo效果.gif