版权声明:本文为博主原创文章,未经博主允许不得转载。 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',
}
});