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,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,marginRight: 10,style_other:{
        bottom:20,//绝对定位
        position:'absolute',//主轴的方向
        flexDirection:'row',//侧轴对齐方式
        alignItems:'center'
    },style_image_other:{
        height:40,width:40,margin:10,});

index.android.js:

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

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

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!