登录界面的搭建

实现的效果如下:  界面有点丑,图片什么的懒得找了,所以...你懂得!!! 但是基本界面的布局还是实现了.

\

代码如下:  注释很清楚哟!!!

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from ‘react‘;
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TextInput,
    Image,
} from ‘react-native‘;

class LoginView extends Component {
    render() {
        return (
            <View style ={styles.container}>

           {/*注释的写法 :  <Text>我是登录界面</Text>*/}

            {/*头像*/}
            <Image source = {require(‘./img/thumb.png‘)} style = {styles.iconStyle}/>
            {/*账号和密码*/}
            <TextInput placeholder = {‘请输入用户名‘} style = {styles.inputStyle}/>
            <TextInput placeholder = {‘请输入密码‘} password = {true} style = {styles.inputStyle}/>
            {/*登录*/}
            <View style = {styles.logBtnStyle}>
               <Text style = {{color: ‘white‘}}>登录</Text>
            </View>
            <View style = {styles.settingStyle}>
               <Text>无法登录</Text>
               <Text>新用户</Text>
            </View>
            {/*其他登录方式*/}
            <View style = {styles.otherLogStyle}>
               <Text>其他登录方式:</Text>
               <Image source = {require(‘./img/weixin.png‘)} style = {styles.otherImgStyle}/>
               <Image source = {require(‘./img/weixin.png‘)} style = {styles.otherImgStyle}/>
               <Image source = {require(‘./img/weixin.png‘)} style = {styles.otherImgStyle}/>

        </View>
            </View>
    );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: ‘#dddddd‘,
        // 侧轴对齐方式
        alignItems: ‘center‘

    },
    inputStyle: {

        // 间距
        // marginTop: 25,
        marginBottom: 1,
        // 背景颜色
        backgroundColor: ‘white‘,
        // 边框
        borderWidth: 1,
        // 高度
        height: 38,
        borderColor: ‘#ebebeb‘,
        // 内容居中
        textAlign: ‘center‘,
    },
    iconStyle: {

        // 间距
        marginTop: 40,
        marginBottom: 20,
        // 宽度
        width: 80,
        // 高度
        height: 80,
        // 圆角
        borderRadius: 40,
        // 宽度
        borderWidth: 2,
        // 边框颜色
        borderColor: ‘white‘,
    },
    logBtnStyle: {

        // 背景颜色
        backgroundColor: ‘blue‘,
        width: 300,
        height: 30,
        marginTop: 20,
        // marginBottpm: 20,
        justifyContent: ‘center‘,
        alignItems: ‘center‘,
    },
    settingStyle: {

        marginTop: 10,
        flexDirection: ‘row‘,
        // 主轴对齐方式
        justifyContent: ‘space-between‘,
        width: 350,
    },
    otherLogStyle: {
        // 主轴对齐
        flexDirection: ‘row‘,
        // 侧轴对齐
        alignItems: ‘center‘,
        // backgroundColor: ‘red‘,
        // 绝对定位
        position: ‘absolute‘,
        bottom: 10,
        left: 20,
    },
    otherImgStyle: {
        width: 60,
        height: 60,
        borderRadius: 30,
    }
});

// 输出组件
module.exports = LoginView;