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

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',
    }


});