React Native 仿登录页面
发布时间:2020-12-15 07:25:39 所属栏目:百科 来源:网络整理
导读:loginView.js 页面 /** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React,{ Component } from 'react';import { AppRegistry,StyleSheet,Image,Text,TextInput,View} from 'react-native';import LogoImage fr
loginView.js 页面 /** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React,{ Component } from 'react'; import { AppRegistry,StyleSheet,Image,Text,TextInput,View } from 'react-native'; import LogoImage from "./img/icon.png"; import QQImage from "./img/img_qq.png"; import WeixinImage from "./img/img_weixin.png"; import SinaImage from "./img/img_sina.png"; var Dimensions = require('Dimensions'); var {width,height} = Dimensions.get('window'); export default class loginView extends Component { render() { return ( <View style={styles.container}> {/*头像*/} <Image source={LogoImage} style={styles.iconStyle}/> {/* 输入账号*/} <TextInput style={styles.inputStyle} underlineColorAndroid="transparent" /> {/* 输入密码*/} <TextInput style={styles.inputStyle} underlineColorAndroid="transparent" secureTextEntry={true} /> {/*登录*/} <View style={styles.loginStyle}> <Text style={{color:'white',fontSize:25}}> 登录 </Text> </View> {/*设置*/} <View style={styles.textStyel}> <Text style={{fontSize:20}}> 无法登陆 </Text> <Text style={{fontSize:20}}> 新用户 </Text> </View> {/*其它登录方式*/} <View style={styles.otherStyle}> <Text>其它登录方式</Text> <Image source={QQImage} style={styles.otherImageStyle}/> <Image source={WeixinImage} style={styles.otherImageStyle}/> <Image source={SinaImage} style={styles.otherImageStyle}/> </View> </View> ); } } const styles = StyleSheet.create({ container: { flex: 1,//定义侧轴排列方式 alignItems:'center',backgroundColor: '#dddddd' },iconStyle:{ marginTop:80,marginBottom:30,width:80,height:80,borderRadius:40,borderWidth:2,borderColor:'white' },inputStyle: { width:width*0.99,height:50,fontSize:20,borderColor:'white',backgroundColor:'white',marginBottom:1,// 内容居中 textAlign:'center' },loginStyle:{ height:50,width:width*0.9,marginTop:30,marginBottom:20,borderRadius:8,backgroundColor:'blue',justifyContent:'center',alignItems:'center',},textStyel:{ width:width*0.9,justifyContent:'space-between',flexDirection:'row',otherStyle:{ flexDirection:'row',// 设置侧轴的对齐方式 alignItems:'center',// 绝对定位 position:'absolute',bottom:20,left:20 },otherImageStyle:{ width:50,borderRadius:25,marginLeft:8 } }index.android.js /** * Sample React Native App * https://github.com/facebook/react-native * @flow */ import React,View } from 'react-native'; import LoginView from "./loginView"; export default class CQQLoginDemo extends Component { render() { return ( <LoginView/> ); } } AppRegistry.registerComponent('CQQLoginDemo',() => CQQLoginDemo); (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
相关内容
- c – shared_ptr和iOS中的引用计数是一样的吗?
- ruby-on-rails – Rails 3.2资产管道和RequireJS
- 翻译 Meteor React 制作 Todos - 11 - 发布订阅
- 如何在ansi C90中捕获运行时错误
- 常用正则表达式大全!(例如:匹配中文、匹配html)
- 正则表达式 - 语法之普通字符
- ruby-on-rails – 在Rails上创建表时需要创建外键吗?
- SQLite3系统学习【2】SQL语句
- c – 在基于lambda的foreach循环中模拟`continue;`,`break;
- LayaAir引擎学习日志3----FlashDevelop/Flash Builder开发环