react-native TextInput 键盘遮挡问题

贴一下 我的render里面的代码 和效果图

 render() {
        return (
            
                 
                      

                      
                              
                      

               

                    
                          
                           this.setState({user_id})}
                              value={this.state.user_id}
                          />
                     

                  

                
                    
                    
                                    this.setState({user_password})}
                        value={this.state.user_password}
                    />
                
                


                 

                
                    this._login()}
                        style={styles.loginText}
                    >登录
                
                
 
               

            
            
           
        );
    }

样式

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems:'center',
        //justifyContent: 'center',
    },

 
    logoView:{
        paddingTop:150,
        alignItems:'center',
    },
    grplogo:{
        width: 137,
        height:36,
    },

    line:{
        width:width-60,
        height:0.8,
        marginLeft:30,
        marginRight:30,
        backgroundColor:'white'
    },


    textInputBoxStyle:{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        height:40,
        marginLeft:30,
        marginRight:30,
        marginTop:90,

    },

    textInputBoxStyle2:{
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center',
        height:40,
        marginLeft:30,
        marginRight:30,
        marginTop:40,
    },



    iconStyle:{
        width: 18,
        height: 20,
    },
    textInputStyle: {
      flex: 1,
      paddingLeft:20,
      justifyContent: 'center',
      color:'white'
    },

    loginBox: {
        justifyContent:'center',
        alignItems:'center',
        marginTop: 49,
        backgroundColor: '#4A90E2',
        height: 40,
        width:130,
        borderRadius:20,
    },
    loginText:{
        textAlign:'center',
        fontSize:18,
        color:'white',
        paddingHorizontal:30,
    }
});

效果图,观察GRP 距离顶部的距离

react-native TextInput 键盘遮挡问题_第1张图片
C5BD64A1-BB5A-4DDE-AAF2-16E48587B13B.png
react-native TextInput 键盘遮挡问题_第2张图片
F3ACF40D-F917-498A-A65F-C96BCE656CC9.png

你可能感兴趣的:(react-native TextInput 键盘遮挡问题)