~~~
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
TextInput,
Image,
TouchableOpacity
} from 'react-native';
var Dimensions = require('Dimensions');
var {width,height,scale} =Dimensions.get('window');
var iWidth=width-30;
class loginView extends Component {
render() {
return (
<View style={styles.container}>
{/* 頭像 */}
<Image style={styles.headStyle} source={{uri:'head'}} />
{/* 登錄表單 */}
<View style={styles.inputView}>
<TextInput style={styles.inputStyle} placeholder={'請輸入您的QQ號'} underlineColorAndroid={'transparent'} keyboardType={'numeric'} />
</View>
<View style={styles.inputView}>
<TextInput style={styles.inputStyle} placeholder={'請輸入您的密碼'} secureTextEntry={true} />
</View>
{/* 觸摸透明反饋 */}
<TouchableOpacity activeOpacity={0.5}>
<View style={styles.loginBtn}>
<Text style={styles.loginBtnText}>登錄</Text>
</View>
</TouchableOpacity>
<View style={styles.fuwutiaokuanView}>
<Text style={styles.tongyi}>我已閱讀并同意</Text>
<TouchableOpacity activeOpacity={0.5}>
<View>
<Text style={styles.fuwutiaokuan}>服務條款</Text>
</View>
</TouchableOpacity>
</View>
<View style={styles.bottomBtn}>
<TouchableOpacity activeOpacity={0.5}>
<Text style={styles.bottomBtnText}>無法登錄</Text>
</TouchableOpacity>
<TouchableOpacity activeOpacity={0.5}>
<Text style={styles.bottomBtnText}>新用戶注冊</Text>
</TouchableOpacity>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex:1,
backgroundColor: '#ecedf1',
alignItems:'center'
},
headStyle:{
width:88,
height:88,
borderWidth:3,
borderColor:'#fff',
borderRadius:88,
marginTop:44,
marginBottom:15
},
inputView:{
width:width,
height:44,
backgroundColor:'#fff',
marginBottom:1
},
inputStyle:{
width:width-30,
height:44,
marginLeft:15,
backgroundColor:'#fff',
},
loginBtn:{
width:iWidth,
height:40,
backgroundColor:'#1fbaf3',
alignItems:'center',
justifyContent:'center',
marginBottom:15,
marginTop:15,
borderRadius:8
},
loginBtnText:{
color:'#ffffff'
},
fuwutiaokuanView:{
width:iWidth,
marginLeft:15,
flexWrap:'wrap',
flexDirection:'row',
justifyContent:'flex-start',
},
fuwutiaokuan:{
color:'#1fbaf3'
},
tongyi:{
alignSelf:'flex-start'
},
bottomBtn:{
width:iWidth,
position:'absolute',
bottom:15,
marginLeft:15,
flexDirection:'row',
justifyContent:'space-between'
},
bottomBtnText:{
color:'#1fbaf3'
}
});
module.exports=loginView;
~~~
