ReactNative——UI1.登录界面样式设置

使用React 基本组件结合flex 属性，实现简单登录布局UI 效果

效果预览：

项目结构：

loginView.js 文件：

/**
 * Created by admin on 2017-8-8.
 * 登录界面UI
 */

'use strict'
import React, {Component} from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    TextInput, TouchableOpacity,
} from 'react-native';
const portraitUrl = require('./img/icon_after_loading.png');
const sinaUrl = require('./img/sina_blog.png');
const qqUrl = require('./img/tencent_qq.png');
const wxUrl = require('./img/tencent_wechat.png');
let Dimensions= require('Dimensions');
let{width,height,scale}=Dimensions.get('window');
export default class LoginView extends Component {

    render(){

        return(
            <View style={styles.container}>
                {/*头像*/}
                <Image source={portraitUrl} style={styles.style_image}/>
                {/*输入框*/}
                <TextInput
                    autoFocus={true}
                    placeholder={'请输入用户名'}
                    underlineColorAndroid={'transparent'}
                    style={styles.style_textInput}/>
                <View style={{height: 1, backgroundColor: '#f4f4f4'}}/>
                <TextInput
                    placeholder={'请输入密码'}
                    secureTextEntry={true}
                    underlineColorAndroid={'transparent'}
                    style={styles.style_textInput_pwd} />
                <TouchableOpacity activeOpacity={0.5}>
              <View   style={styles.style_text_login}>
                  <Text style={{color:'white'}}>登录</Text>
              </View>
                </TouchableOpacity>
                {/*无法登录&新用户*/}
                <View style={styles.style_setting}>
                    <TouchableOpacity activeOpacity={0.5}>
                    <Text style={styles.style_view_unlogin} >无法登录？</Text>
                    </TouchableOpacity>
                    <TouchableOpacity activeOpacity={0.5}>
                    <Text style={styles.style_view_register}>新用户</Text>
                    </TouchableOpacity>
                </View>
                {/*其他登录方式*/}

                <View style={styles.style_other}>
                    <Text style={styles.style_view_unlogin} >其他登录方式：</Text>
                    <TouchableOpacity activeOpacity={0.5}>
                    <Image source={sinaUrl} style={styles.style_image_other}/>
                    </TouchableOpacity>
                    <TouchableOpacity activeOpacity={0.5}>
                    <Image source={qqUrl} style={styles.style_image_other}/>
                    </TouchableOpacity>
                    <TouchableOpacity activeOpacity={0.5}>
                    <Image source={wxUrl} style={styles.style_image_other}/>
                    </TouchableOpacity>
                </View>

            </View>
        )
    };
}

const styles = StyleSheet.create({

    container:{
        flex:1,

    },
    style_image:{
        marginTop:100,
        height:80,
        width:80,
        alignSelf:'center',
    },
    style_textInput:{
        height:38,
        backgroundColor:'#fff',
        marginTop:50,
        textAlign:'center',

    },
    style_textInput_pwd:{
        height:38,
        backgroundColor:'#fff',
        textAlign:'center',
    },
    style_text_login:{
        width:0.95*width,
        backgroundColor:'#63B8FF',
        marginTop: 40,

        height:45,
        borderRadius: 5,
        justifyContent: 'center',
        alignItems: 'center',
        alignSelf:'center'
    },

    style_setting:{
        //设置主轴方向
        flexDirection:'row',
        //主轴对齐方式
        justifyContent:'space-between',
        paddingTop:20,
    },
    style_view_unlogin: {
        fontSize: 12,
        color: '#63B8FF',
        marginLeft: 10,
    },
    style_view_register: {
        fontSize: 12,
        color: '#63B8FF',
        marginRight: 10,
    },
    style_other:{
        bottom:20,
        //绝对定位
        position:'absolute',
        //主轴的方向
        flexDirection:'row',
        marginTop:50,
        //侧轴对齐方式
        alignItems:'center'
    },
    style_image_other:{
        height:40,
        width:40,
        margin:10,
    },
});

index.android.js:

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

import LoginView from './loginView';
export default class Day0808 extends Component {
    render() {
        return (
            <LoginView/>
        );
    }
}
AppRegistry.registerComponent('Day0808', () => Day0808);

不论大神还是新手，欢迎加QQ群一起讨论问题学习技术：230274309