React Native 仿登录页面

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.jb51.cc/react/304316.html