loginView.js 页面
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Image,
Text,
TextInput,
View
} from 'react-native';
import LogoImage from "./img/icon.png";
import QQImage from "./img/img_qq.png";
import WeixinImage from "./img/img_weixin.png";
import SinaImage from "./img/img_sina.png";
var Dimensions = require('Dimensions');
var {width,height} = Dimensions.get('window');
export default class loginView extends Component {
render() {
return (
<View style={styles.container}>
{/*头像*/}
<Image source={LogoImage} style={styles.iconStyle}/>
{/* 输入账号*/}
<TextInput style={styles.inputStyle}
underlineColorAndroid="transparent"
/>
{/* 输入密码*/}
<TextInput style={styles.inputStyle}
underlineColorAndroid="transparent"
secureTextEntry={true}
/>
{/*登录*/}
<View style={styles.loginStyle}>
<Text style={{color:'white',fontSize:25}}>
登录
</Text>
</View>
{/*设置*/}
<View style={styles.textStyel}>
<Text style={{fontSize:20}}>
无法登陆
</Text>
<Text style={{fontSize:20}}>
新用户
</Text>
</View>
{/*其它登录方式*/}
<View style={styles.otherStyle}>
<Text>其它登录方式</Text>
<Image source={QQImage} style={styles.otherImageStyle}/>
<Image source={WeixinImage} style={styles.otherImageStyle}/>
<Image source={SinaImage} style={styles.otherImageStyle}/>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
//定义侧轴排列方式
alignItems:'center',
backgroundColor: '#dddddd'
},
iconStyle:{
marginTop:80,
marginBottom:30,
width:80,
height:80,
borderRadius:40,
borderWidth:2,
borderColor:'white'
},
inputStyle: {
width:width*0.99,
height:50,
fontSize:20,
borderWidth:2,
borderColor:'white',
backgroundColor:'white',
marginBottom:1,
// 内容居中
textAlign:'center'
},
loginStyle:{
height:50,
width:width*0.9,
marginTop:30,
marginBottom:20,
borderRadius:8,
backgroundColor:'blue',
justifyContent:'center',
alignItems:'center',
},
textStyel:{
width:width*0.9,
justifyContent:'space-between',
flexDirection:'row',
},
otherStyle:{
flexDirection:'row',
// 设置侧轴的对齐方式
alignItems:'center',
// 绝对定位
position:'absolute',
bottom:20,
left:20
},
otherImageStyle:{
width:50,
height:50,
borderRadius:25,
marginLeft:8
}
}
index.android.js
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
TextInput,
Text,
View
} from 'react-native';
import LoginView from "./loginView";
export default class CQQLoginDemo extends Component {
render() {
return (
<LoginView/>
);
}
}
AppRegistry.registerComponent('CQQLoginDemo', () => CQQLoginDemo);