react-native键盘弹起遮挡输入框

import React, { Component } from 'react';
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
    FlatList,
    Dimensions,
    WebView,
    TouchableOpacity,
    TextInput,
    NativeModules,
    DeviceEventEmitter,
    Alert,
    ToastAndroid,
    ActivityIndicator,
    AsyncStorage,
    AppState,
    ProgressBarAndroid,
    //键盘
    Keyboard,
    findNodeHandle,
    ScrollView,
} from 'react-native';
// 讲^^ 获取屏幕的宽度 高度
var width = Dimensions.get('window').width;
var height = Dimensions.get('window').height;

import Icon from 'react-native-vector-icons/Ionicons';
import  Utils from '../common/Utils';
import theme from '../common/color'

class Login extends Component<{}> {
    static navigationOptions = {
        title: '登录',
    };
    constructor(props) {
        super(props);

        this.state={
            phoneNumber:'',//用户名
            passWord:'',//密码
            //##键盘
            keyboardHeight:0
        };
    }


    componentWillMount(){

    }

    //点击登录按钮
    loginStart(){
        console.log("点击登录");

    }
    //获取用户名中的值
    getName(text){
        console.log("用户名填的值",text);
        this.setState({
            phoneNumber:text
        });
    }
    getPass(text){
        this.setState({
            passWord:text
        });
    }
    //键盘
    _keyboardDidShow(e){
        console.log(e,"键盘高度");
        this.setState({
            keyboardHeight:e.endCoordinates.height
        })

    }
    _keyboardDidHide(e){
        this.setState({
            keyboardHeight:0
        })
    }
    scrollViewTo(e) {
        let target = e.nativeEvent.target;
        let scrollLength = 0;//初始值
        if (target === findNodeHandle(this.refs.hour)||target === findNodeHandle(this.refs.name)) {
            scrollLength = this.state.keyboardHeight;
        }
        this.refs.scroll.scrollTo({y: scrollLength, x: 0});
        console.log(scrollLength,"移动的高度");
    }
    render() {
        const { navigate } = this.props.navigation;
        return (
            //如果当前界面有软键盘，那么点击scrollview后是否收起键盘
            <ScrollView style={{flex: 1}} keyboardShouldPersistTaps={'always'} ref='scroll'>
                {/*键盘 keyboardShouldPersistTaps 键盘不会自动收起，ScrollView也不会捕捉点击事件，但子组件可以捕获 ref */}
                <View style={styles.loginContain}>
                    <Text style={styles.loginHeader}>登录</Text>
                    {/*键盘  onStartShouldSetResponderCapture ref */}
                    <View style={styles.loginForm} onStartShouldSetResponderCapture={(e) => {
                        let target = e.nativeEvent.target;
                        if (target !== findNodeHandle(this.refs.hour) ||target !== findNodeHandle(this.refs.name)) {
                            this.refs.hour.blur();
                            this.refs.name.blur();
                        }
                    }}>
                        <View style={styles.loginItem}>
                            <Text style={styles.loginLeft}>手机号：</Text>
                            <TextInput style={styles.loginInput}
                                       underlineColorAndroid={'transparent'}
                                       onChangeText={this.getName.bind(this)}
                                       value={this.state.phoneNumber}
                                       keyboardType="numeric"
                                       ref="name"
                                       onFocus={this.scrollViewTo.bind(this)}
                                       onEndEditing={()=>{this.refs.scroll.scrollTo({y:0,x:0,animated:true})}}/>
                        </View>
                        <View style={styles.loginItem}>
                            <Text style={styles.loginLeft}>密码：</Text>
                            <TextInput style={styles.loginInput}
                                       ref="hour"
                                       underlineColorAndroid={'transparent'}
                                       onChangeText={this.getPass.bind(this)}
                                       value={this.state.passWord}
                                       onFocus={this.scrollViewTo.bind(this)}
                                       onEndEditing={()=>{
                                            this.refs.scroll.scrollTo({y:0,x:0,animated:true})
                                          }
                                        }
                                       secureTextEntry={true}/>
                        </View>
                    </View>
                    <TouchableOpacity style={styles.loginStart} onPress={this.loginStart.bind(this)}>
                        <Text style={styles.loginText}>登录</Text>
                    </TouchableOpacity>
                    <ActivityIndicator
                        animating={this.state.animating}
                        style={[styles.loading, {height: 80}]}
                        size="large"
                    />
                </View>
            </ScrollView>
        );
    }
}

const styles = StyleSheet.create({
    icon:{
        width:30,
        height:30
    },
    //大登录
    loginHeader:{
        fontSize:30,
        color:'#000',
        textAlign:'center',
        marginTop:40,
        marginBottom:40
    },
    loginContain:{
        flexDirection:'column',
        width:width*0.8,
        alignSelf:'center',
        justifyContent:'center'
    },
    loginImage:{
        width:70,
        height:70,
        alignSelf:'center',
        marginTop:30,
        marginBottom:30,
    },
    loginForm:{
        marginBottom:40,
    },
    loginItem:{
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center',
        height:50,
    },
    loginLeft:{
        color:'#222',
        width:80,
        marginLeft:10,
        fontSize:14,
    },
    loginInput:{
        flex:1,
        marginRight:10,
        height:30,
        borderBottomWidth:1,
        borderBottomColor:'#ACACAC',
        padding:0,
    },
    loginCheckContain:{
        flexDirection:'row',
        justifyContent:'space-between'
    },
    loginCheck:{
        flexDirection:'row',
        alignItems:'center'
    },
});

export default withApollo(Login);