搭建QQ登录界面

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

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

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


export default class App extends Component<{}> {
  render() {
    return (
      <View style={styles.container}>
        {/*头像*/}
        <Image source={require('./img/my.jpg')} style={styles.topImageStyle}/>
        {/*文本输入*/}
        <TextInput placeholder='请输入账号' underlineColorAndroid='transparent' style={styles.textInputStyle}/>
        <TextInput placeholder='请输入密码' underlineColorAndroid='transparent'  secureTextEntry={true} style={styles.textInputStyle}/>
        {/*登录的按钮*/}
        <View style={styles.loginStyle}>
          <Text>
            登录
          </Text>
        </View>
        {/*无法登陆 新用户*/}
        <View style={styles.centerViewStyle}>
          <Text>无法登录</Text>
          <Text>新用户</Text>
        </View>
        {/*其他的登录方式*/}
        <View style={styles.otherLoginStyle}>
           <Text>其他登录方式</Text>
          <Image  source={require('./img/xinlang.png')} style={styles.bottomImageStyle}/>
          <Image source={require('./img/QQ.png')} style={styles.bottomImageStyle}/>
          <Image source={require('./img/wechat.png')} style={styles.bottomImageStyle}/>
        </View>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#dddddd',
    alignItems:'center',
      paddingTop:10
  },
  topImageStyle:{
    width:80,
    height:80,
    borderRadius:50,
    marginBottom:30
  },
  textInputStyle:{
    height:38,
    width:width,
      marginBottom:1,
    backgroundColor:'white'
  },
    loginStyle:{
    width:width*0.9,
    height:42,
    backgroundColor:'#4DAFDF',
        alignItems:'center',
        justifyContent:'center',
        marginTop:20,
        borderRadius:10
  },
  centerViewStyle:{
   flexDirection:'row',
   width:width*0.85,
   marginTop:10,
   justifyContent:'space-between',
  },
  otherLoginStyle:{
   flexDirection:'row',
   position:'absolute',
   bottom:10,

   width:width*0.9,
   alignItems:'center',

   },
  bottomImageStyle:{
   marginLeft:10,
   width:40,
   height:40,

  }
});