RN实战项目登录界面（四）

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

RN实战项目登录界面（四）

先看下效果图

RN中图片适配的话和ios是一样的，把相同的图片按照不同分辨率分为@2x @3x放到指定的文件夹下即可自动适配

注意RN中View默认是column垂直排列的，如果想要横向排列的话指定flexDirection：‘row’ 即可

import React, { Component } from 'react';
import {
    StyleSheet,
    ToastAndroid,
    View,
    Image,
    Text,
    TextInput,
    TouchableHighlight,
    AsyncStorage,
} from 'react-native';
import NetUtils from '../net/NetUtils';
import Home from './Home';

/**
 * 登录界面
 */
export default class Login extends Component {

    constructor(props) {
        super(props);
        //设置默认帐号密码 方便测试
        this.state = {
            username: 'username',
            password: '123456',
        };
    }

    /**
    * 登录
    * @param {*} username 
    * @param {*} password  md5加密
    */
    onLogin(username, password) {
        var url = 'http://192.168.2.112:8042/ShengDaAutoPlatform/client!businessUserLogin';
        var params = "service=businessUserLogin&businessUserName=" + username + "&businessPassword=" + NetUtils.MD5(password);
        var service = "businessUserLogin";
        NetUtils.post(url, service, params, (result) => {
            //存储数据
            AsyncStorage.setItem("userInfo", JSON.stringify(result), (error) => {
                if (error) {
                    alert('数据保存失败');
                } else {
                    //跳转到主界面
                    let navigator = this.props.navigator;
                    if (navigator) {
                        navigator.push({
                            name: '主界面',
                            component: Home,
                        });
                    }
                }
            })
        });
    }

    render() {
        return (
            <View style={style.container}>

                <View style={{ marginTop: 80, alignItems: 'center' }}>
                    <Image source={require('../img/ic_login_banner.png')}></Image>
                </View>

                //placeholder 类似于android edite hint 
                //secureTextEntry 安全模式 也就是密码模式
                //onChangeText 文本框内容改变后回调
                <TextInput
                    secureTextEntry={true}
                    style={{ marginTop: 50 }}
                    placeholder='请输入帐号'
                    value={this.state.username}
                    onChangeText={text => this.setState({
                        username: text
                    })}
                >
                </TextInput>

                <TextInput
                    placeholder='请输入密码'
                    secureTextEntry={true}
                    value={this.state.password}
                    onChangeText={text => this.setState({
                        password: text
                    })}
                >
                </TextInput>

                <TouchableHighlight
                    style={style.textCenter}
                    underlayColor='gray'
                    onPress={() => this.onLogin(this.state.username, this.state.password)}>
                    <Text style={style.button}>登录</Text>
                </TouchableHighlight>

            </View>
        );
    };
}

var style = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#3F83FE',
        paddingLeft: 30,
        paddingRight: 30
    },
    button: {
        color: '#3F83FE',
        fontSize: 20,
    },
    textCenter: {
        height: 50,
        marginTop: 50,
        backgroundColor: 'white',
        justifyContent: 'center',
        alignItems: 'center',
    }
});

登录界面完成了，有问题的话可以留言哈