ReactNative→登录界面

登录界面

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

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

var Dimensions = require('Dimensions');
var {width, height} = Dimensions.get('window');

export default class helloworld extends Component {

  render() {

    return (
        

          

          
          

          

            登录

          

          

            无法登录
            新登录

          

          

            其他方式登录
            
            
            

          


        
    );
  }
}


const styles = StyleSheet.create({
  container: {
    flex:1,
    backgroundColor:'#efefef',

    //侧轴方向
    alignItems : 'center',

    paddingTop: 40,
  },
  icon:{

    width:60,
    height:60,
    borderRadius:30,
    marginBottom:30
  },
  intputStyle1:{
    width:width,
    height:40,
    backgroundColor:'white',
  },
  intputStyle2:{
    width:width,
    height:40,
    backgroundColor:'white',
    marginTop:10
  },
  loginview:{

    width:width*0.9,
    height:40,
    backgroundColor:'blue',
    //主轴对齐
    justifyContent:'center',
    //侧轴
    alignItems:'center',
    marginTop:10

  },
  des:{
     // 主轴方向
    flexDirection:'row',
    width:width*0.9,
    // 主轴对齐方式
    justifyContent:'space-between',
  },
  bottomStyle:{
    // 主轴方向
    flexDirection:'row',
    alignItems:'center',
    position:'absolute',
    bottom:20,
    // justifyContent:'flex-start',
    left:20
  },
  image:{
    width:30,
    height:30,
    marginLeft:15,
    borderRadius:15,
  }

});

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