RN实现登录界面,点击登录获取输入框的数据

gif

今天实现一个登陆页面，结果发现TextInput 的 password={true} 根本不能设置成密码框,最后经过一番的质询，发现是secureTextEntry={true}这个属性字段,真是郁闷，为啥有的人是设置password={true}呢？高低版本的问题？那么高版本为啥又没有password={true}呢？这个属性字段多好记啊！

import React, {Component} from "react";
import {Text,TouchableOpacity,Dimensions,Image,TextInput, StyleSheet,View,ToastAndroid,Alert} from "react-native";

// var Dimensions = require('Dimensions');
var {width,height,scale} = Dimensions.get('window');

export default class LoginView extends Component {
    state = {
        userName:'',
        passWord:''
    };
    constructor(props){
        super(props);
        this.state= {
            userName:'',
            passWord:''
        }
    }
    loginMethod=(state)=>{
        Alert.alert(
            '登录提示',
            '请确认账号和密码',
            [
                { text: '取消', onPress: () => {} },
                { text: '确定', onPress:  () => 
                    // ToastAndroid.show("用户名："+ state.userName + "\t 密码：" + state.passWord,ToastAndroid.SHORT) 
                    ToastAndroid.show(`用户名：${state.userName}\t 密码：${state.passWord}`,ToastAndroid.SHORT) 
                }
            ],
            { cancelable: true });
    };

    render() {
        return (
            
                {/*头像*/}
                
                {/*账号和密码*/}
                this.setState({userName})}/>
                this.setState({passWord})}/>

                {/*登录*/}
                {this.loginMethod(this.state)}}>
                    登录
                
                {/*设置*/}
                
                    无法登录
                    新用户
                
                {/*其他的登录方式*/}
                
                    其他登录方式: 
                    
                    
                    
                

            
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#dddddd',
        // 设置侧轴的对齐方式
        alignItems:'center'
    },

    iconStyle:{
        marginTop:50,
        marginBottom:30,
        width:80,
        height:80,
        borderRadius:40,
        borderWidth:2,
        borderColor:'white'
    },

    textInputStyle:{
        width:width*0.8,
        height:38,
        backgroundColor:'white',
        marginBottom:1,
        // 内容居中
        textAlign:'left',
        borderColor: 'lightgrey',
        borderWidth: 1,
        borderRadius:4,
        alignSelf:'center'
    },

    loginBtnStyle:{
        height:35,
        width:width*0.9,
        backgroundColor:'green',
        marginTop:30,
        marginBottom:20,
        justifyContent:'center',
        alignItems:'center',
        borderRadius:8
    },

    settingStyle:{
        // 设置主轴的方向
        flexDirection:'row',
        // backgroundColor:'red',

        // 主轴的对齐方式
        width:width*0.9,
        justifyContent:'space-between'
    },

    otherLoginStyle:{
        // backgroundColor:'red',

        // 设置主轴的方向
        flexDirection:'row',

        // 设置侧轴的对齐方式
        alignItems:'center',

        // 绝对定位
        position:'absolute',
        bottom:10,
        left:20
    },

    otherImageStyle:{
        width:50,
        height:50,
        borderRadius:25,
        marginLeft:8
    }
});

上面中可以看到软键盘可以把其他登录方式的布局顶上去在这里需要修改Android的AndroidManifest.xml文件里android:windowSoftInputMode属性值就可以了。

• 将默认的android:windowSoftInputMode="adjustResize"修改为android:windowSoftInputMode="adjustPan"

2018111611311.gif