天天瞎忙活，QQ：705719110，欢迎来撩！

React Native登录界面

JS学习 随风 1712℃

来做一个登录界面，这里使用的是组件开发，将登录界面做成一个组件在入口文件中调用，先看一下组件

RN
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TextInput,
} from 'react-native';
 
var Dimensions = require('Dimensions');
//定义一些全局变量
var {width} = Dimensions.get('window');
 
class loginView extends Component {
    render() {
        return (
            <View style={styles.container}>
                {/*头像*/}
                <Image style={styles.pic} source={{uri: 'http://blog.duicode.com/wp-content/uploads/2016/12/icon_user_monkey_i6@2x.png'}}>
                </Image>
                {/*账号密码*/}
                <TextInput style={styles.textInputStyle} placeholder={'请输入用户名'} />
                <TextInput style={styles.textInputStyle} placeholder={'请输入密码'} password={true} />
                {/*登录*/}
                <View style={styles.loginBtnStyle}>
                    <Text style={{color:'white'}}>登录</Text>
                </View>
                {/*设置*/}
                <View style={styles.settingStyle}>
                    <Text style={{color:'green'}}>无法登陆</Text>
                    <Text style={{color:'green'}}>新用户</Text>
                </View>
                {/*其他登录方式*/}
                <View style={styles.otherLoginStyle}>
                    <Text>其他登录方式:</Text>
                    <Image style={styles.img} source={require('./phone.png')}></Image>
                    <Image style={styles.img} source={require('./phone.png')}></Image>
                    <Image style={styles.img} source={require('./phone.png')}></Image>
                </View>
            </View>
        );
    }
}
 
const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#dddddd',
        alignItems:'center',
    },
    pic: {
        width:80,
        height:80,
        borderRadius:40,
        borderWidth:4,
        borderColor:'white',
        marginTop:50,
        marginBottom:30,
    },
    username:{
 
    },
    password:{
 
    },
    textInputStyle:{
        height:44,
        backgroundColor:'white',
        marginBottom:1,
        textAlign:'center',
    },
    loginBtnStyle:{
        height:44,
        width:width - 40,
        backgroundColor:'blue',
        marginTop:30,
        marginBottom:20,
 
        justifyContent:'center',
        alignItems:'center',
 
        borderRadius:5,
    },
    settingStyle:{
        flexDirection:'row',
        justifyContent:'space-between',
        width:width - 40,
 
    },
    otherLoginStyle:{
        // backgroundColor:'red',
        flexDirection:'row',
        alignItems:'center',
 
        //绝对定位
        position:'absolute',
        bottom:10,
        left:20,
 
    },
    img:{
        width:40,
        height:30,
        marginLeft:5,
    }
});
 
//输出类
module.exports = loginView;

然后在入口文件中调用

RN
JavaScript
1
2
3
4
5
6
7
8
9
10
11
//引入外部的js文件
var LoginView = require('./loginView');
 
class MyProject4 extends Component {
    render() {
        return (
            <LoginView />
        );
    }
}
AppRegistry.registerComponent('MyProject', () => MyProject4);

来看一下结果

转载请注明：怼码人生 » React Native登录界面

喜欢 (1)