React-Native学习之 防止键盘遮挡TextInput

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/jing85432373/article/details/54928709

import React, {Component} from 'react';
import ReactNative, {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TextInput,
    Dimensions,
    Platform,
    TouchableOpacity,
    ScrollView,
   


} from 'react-native';


import Icon from 'react-native-vector-icons/FontAwesome'


var {width, height}=Dimensions.get('window')


export default class Login extends Component {

   
    _reset() {

        this.refs.scrollView.scrollTo({y: 0});

    }

    _onFocus(refName) {

        setTimeout(() => {
            let scrollResponder = this.refs.scrollView.getScrollResponder();
            scrollResponder.scrollResponderScrollNativeHandleToKeyboard(
                ReactNative.findNodeHandle(this.refs[refName]), 10, true);
        }, 100);
    }
  
   
    render() {
        return (

            <ScrollView
                scrollEnabled={false}     //防止滑动
                contentContainerStyle={{flex:1}}
                ref="scrollView">
                <View style={styles.container}>
                        
                   
                        <TextInput
                            ref="textInput"
                            onBlur={this._reset.bind(this)}
                            onFocus={this._onFocus.bind(this, 'textInput')}
                            keyboardType={'numeric'}
                            placeholder='站点地址(URL)'
                            style={styles.username}/>
                                   
                </View>
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#4396d3',
    },
   
    username: {
        width: width - 40,
        height: 40,
        backgroundColor: 'white',
        justifyContent: 'center',

    }


});