React Native登录界面

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

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 (
            
                {/*头像*/}
                
                
                {/*账号密码*/}
                
                
                {/*登录*/}
                
                    登录
                
                {/*设置*/}
                
                    无法登陆
                    新用户
                
                {/*其他登录方式*/}
                
                    其他登录方式:
                    
                    
                    
                
            
        );
    }
}

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;

然后在入口文件中调用

//引入外部的js文件
var LoginView = require('./loginView');

class MyProject4 extends Component {
    render() {
        return (
            
        );
    }
}
AppRegistry.registerComponent('MyProject', () => MyProject4);

来看一下结果