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 (
            <View style={styles.container}>
                <TouchableOpacity style={{alignItems: 'center', width: width, height: 30, backgroundColor:'yellow', marginTop: 20}}
                                  onPress={()=>{
                                      this.refs.scroll.scrollToPosition(0, 0, true) // 滚动到具体的位置
                                      //this.refs.scroll.scrollToEnd(animated: true); 滚动到底部
                                  }}
                >
                    <Text style={{textAlign: 'center', lineHeight: 30}}>
                        点击按钮，KeyboardAwareScrollView 滚动到顶部
                    </Text>
                </TouchableOpacity>
                <KeyboardAwareScrollView style={{ width: width, height: height}}
                                         ref='scroll'
                                         onKeyboardWillShow={(frames: Object) => {
                                             console.log('键盘弹出时，键盘高度改变时：', frames)
                                         }}

                >
                    <View>
                        <TextInput style={{marginTop: 30, width: width, height: 30, backgroundColor: '#f5f5f5'}}
                                   onFocus={(event: Event) => {
                                   }} placeholder='textInput 1'/>
                        <TextInput style={{marginTop: 30, width: width, height: 30, backgroundColor: '#f5f5f5'}}
                                   onFocus={(event: Event) => {
                                   }} placeholder='textInput 2'/>
                        <TextInput style={{marginTop: 30, width: width, height: 30, backgroundColor: '#f5f5f5'}}
                                   onFocus={(event: Event) => {
                                   }} placeholder='textInput 3'/>
                        <TextInput style={{marginTop: 30, width: width, height: 30, backgroundColor: '#f5f5f5'}}
                                   onFocus={(event: Event) => {
                                   }} placeholder='textInput 4'/>
                        <TextInput style={{marginTop: 30, width: width, height: 30, backgroundColor: '#f5f5f5'}}
                                   onFocus={(event: Event) => {
                                   }} placeholder='textInput 5'/>
                        <TextInput style={{marginTop: 30, width: width, height: 30, backgroundColor: '#f5f5f5'}}
                                   onFocus={(event: Event) => {
                                   }} placeholder='textInput 6'/>
                        <TextInput style={{marginTop: 30, width: width, height: 30, backgroundColor: '#f5f5f5'}}
                                   onFocus={(event: Event) => {
                                   }} placeholder='textInput 7'/>
                        <TextInput style={{marginTop: 30, width: width, height: 30, backgroundColor: '#f5f5f5'}}
                                   onFocus={(event: Event) => {
                                   }} placeholder='textInput 8'/>
                        <TextInput style={{marginTop: 30, width: width, height: 30, backgroundColor: '#f5f5f5'}}
                                   onFocus={(event: Event) => {
                                   }} placeholder='textInput 9'/>
                        <TextInput style={{marginTop: 30, width: width, height: 30, backgroundColor: '#f5f5f5'}}
                                   onFocus={(event: Event) => {
                                   }} placeholder='textInput 10'/>
                        <TextInput style={{marginTop: 30, width: width, height: 30, backgroundColor: '#f5f5f5'}}
                                   onFocus={(event: Event) => {
                                   }} placeholder='textInput 11'/>
                        <TextInput style={{marginTop: 30, width: width, height: 30, backgroundColor: '#f5f5f5'}}
                                   onFocus={(event: Event) => {
                                   }} placeholder='textInput 12'/>
                        <TextInput style={{marginTop: 30, width: width, height: 30, backgroundColor: '#f5f5f5'}}
                                   onFocus={(event: Event) => {
                                   }} placeholder='textInput 13'/>

                    </View>
                </KeyboardAwareScrollView>

            </View>
        );

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

QQ20170918-182124.gif

官网demo效果.gif