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);
原文链接:https://www.f2er.com/react/304316.html