React Native 仿登录页面一

loginView.js 页面 

 

1.  
   /**
2.  
   * Sample React Native App
3.  
   * https://github.com/facebook/react-native
4.  
   * @flow
5.  
   */
6.  
    
7.  
   import React, { Component } from 'react';
8.  
   import {
9.  
   AppRegistry,
10.  
    StyleSheet,
11.  
    Image,
12.  
    Text,
13.  
    TextInput,
14.  
    View
15.  
    } from 'react-native';
16.  
     
17.  
    import LogoImage from "./img/icon.png";
18.  
    import QQImage from "./img/img_qq.png";
19.  
    import WeixinImage from "./img/img_weixin.png";
20.  
    import SinaImage from "./img/img_sina.png";
21.  
     
22.  
    var Dimensions = require('Dimensions');
23.  
    var {width,height} = Dimensions.get('window');
24.  
     
25.  
    export default class loginView extends Component {
26.  
     
27.  
    render() {
28.  
    return (
29.  
    <View style={styles.container}>
30.  
    {/*头像*/}
31.  
    <Image source={LogoImage} style={styles.iconStyle}/>
32.  
    {/* 输入账号*/}
33.  
    <TextInput style={styles.inputStyle}
34.  
    underlineColorAndroid="transparent"
35.  
    />
36.  
    {/* 输入密码*/}
37.  
    <TextInput style={styles.inputStyle}
38.  
    underlineColorAndroid="transparent"
39.  
    secureTextEntry={true}
40.  
    />
41.  
    {/*登录*/}
42.  
    <View style={styles.loginStyle}>
43.  
    <Text style={{color:'white',fontSize:25}}>
44.  
    登录
45.  
    </Text>
46.  
    </View>
47.  
    {/*设置*/}
48.  
    <View style={styles.textStyel}>
49.  
    <Text style={{fontSize:20}}>
50.  
    无法登陆
51.  
    </Text>
52.  
    <Text style={{fontSize:20}}>
53.  
    新用户
54.  
    </Text>
55.  
    </View>
56.  
    {/*其它登录方式*/}
57.  
    <View style={styles.otherStyle}>
58.  
    <Text>其它登录方式</Text>
59.  
    <Image source={QQImage} style={styles.otherImageStyle}/>
60.  
    <Image source={WeixinImage} style={styles.otherImageStyle}/>
61.  
    <Image source={SinaImage} style={styles.otherImageStyle}/>
62.  
    </View>
63.  
    </View>
64.  
    );
65.  
    }
66.  
    }
67.  
     
68.  
    const styles = StyleSheet.create({
69.  
    container: {
70.  
    flex: 1,
71.  
    //定义侧轴排列方式
72.  
    alignItems:'center',
73.  
    backgroundColor: '#dddddd'
74.  
    },
75.  
    iconStyle:{
76.  
    marginTop:80,
77.  
    marginBottom:30,
78.  
    width:80,
79.  
    height:80,
80.  
    borderRadius:40,
81.  
    borderWidth:2,
82.  
    borderColor:'white'
83.  
    },
84.  
    inputStyle: {
85.  
    width:width*0.99,
86.  
    height:50,
87.  
    fontSize:20,
88.  
    borderWidth:2,
89.  
    borderColor:'white',
90.  
    backgroundColor:'white',
91.  
    marginBottom:1,
92.  
    // 内容居中
93.  
    textAlign:'center'
94.  
     
95.  
    },
96.  
    loginStyle:{
97.  
    height:50,
98.  
    width:width*0.9,
99.  
    marginTop:30,
100.  
     marginBottom:20,
101.  
     borderRadius:8,
102.  
     backgroundColor:'blue',
103.  
     justifyContent:'center',
104.  
     alignItems:'center',
105.  
     },
106.  
     textStyel:{
107.  
     width:width*0.9,
108.  
     justifyContent:'space-between',
109.  
     flexDirection:'row',
110.  
     },
111.  
     otherStyle:{
112.  
     flexDirection:'row',
113.  
     // 设置侧轴的对齐方式
114.  
     alignItems:'center',
115.  
     // 绝对定位
116.  
     position:'absolute',
117.  
     bottom:20,
118.  
     left:20
119.  
     },
120.  
     otherImageStyle:{
121.  
     width:50,
122.  
     height:50,
123.  
     borderRadius:25,
124.  
     marginLeft:8
125.  
     }
126.  
     }

index.android.js

 

1.  
   /**
2.  
   * Sample React Native App
3.  
   * https://github.com/facebook/react-native
4.  
   * @flow
5.  
   */
6.  
    
7.  
   import React, { Component } from 'react';
8.  
   import {
9.  
   AppRegistry,
10.  
    StyleSheet,
11.  
    TextInput,
12.  
    Text,
13.  
    View
14.  
    } from 'react-native';
15.  
     
16.  
    import LoginView from "./loginView";
17.  
     
18.  
    export default class CQQLoginDemo extends Component {
19.  
    render() {
20.  
    return (
21.  
    <LoginView/>
22.  
    );
23.  
    }
24.  
    }
25.  
     
26.  
    AppRegistry.registerComponent('CQQLoginDemo', () => CQQLoginDemo);