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 (
        <View style={styles.container}>

          <Image source={require('./img/bag.png')} style={styles.icon} />

          <TextInput style={styles.intputStyle1} placeholder='请输入账号' textAlign="center"></TextInput>
          <TextInput style={styles.intputStyle2} placeholder='请输入密码' textAlign="center" secureTextEntry={true}></TextInput>

          <View style={styles.loginview}>

            <Text>登录</Text>

          </View>

          <View style={styles.des}>

            <Text>无法登录</Text>
            <Text>新登录</Text>

          </View>

          <View style={styles.bottomStyle}>

            <Text>其他方式登录</Text>
            <Image source={require('./img.bag.png')} style={styles.image}/>
            <Image source={require('./img.bag.png')} style={styles.image}/>
            <Image source={require('./img.bag.png')} style={styles.image}/>

          </View>


        </View>
    );
  }
}


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);