使用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
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。