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,
    borderWidth:2,
    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,
    height:50,
    borderRadius:25,
    marginLeft:8
    }
}

index.android.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

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

import LoginView from "./loginView";

export default class CQQLoginDemo extends Component {
  render() {
    return (
     <LoginView/>
    );
  }
}

AppRegistry.registerComponent('CQQLoginDemo', () => CQQLoginDemo);