QQ登录界面案例布局

import React, {Component} from 'react';
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Text,
    Image,
    TextInput,
    TouchableOpacity,
    Alert
} from 'react-native';

import {
    Header,
    LearnMoreLinks,
    Colors,
    DebugInstructions,
    ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

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

export default class LoginView extends Component {
    render(){
        return (
            <View style={styles.container}>
                {/*头像*/}
                <Image source={require('./img/icon.png')} style={styles.iconStyle}/>
                {/*账号和密码*/}
                <TextInput placeholder={'请输入用户名'} style={styles.textInputStyle}/>
                <TextInput placeholder={'请输入密码'} password={true} style={styles.textInputStyle}/>
                {/*登陆*/}
                <TouchableOpacity
                    activeOpacity={0.5}
                    onPress ={()=>this.activeEvent('登陆')}
                >
                    <View style={styles.loginBtnStyle}>

                        <Text style={{color:'white'}}>登陆</Text>

                    </View>
                </TouchableOpacity>
                {/*设置*/}
                <View style={styles.settingStyle}>
                    <TouchableOpacity
                        activeOpacity={0.5}
                        onPress ={()=>this.activeEvent('无法登陆')}
                    >
                        <Text>无法登陆</Text>
                    </TouchableOpacity>


                    <TouchableOpacity
                        activeOpacity={0.5}
                        onPress ={()=>this.activeEvent('新用户')}
                    >
                        <Text>新用户</Text>
                    </TouchableOpacity>
                </View>
                {/*其他登陆方式*/}
                <View style={styles.otherLoginStyle}>
                    <Text>其他登陆方式:</Text>
                    <Image source={require('./img/icon3.png')} style={styles.otherImageStyle}/>
                    <Image source={require('./img/icon7.png')} style={styles.otherImageStyle}/>
                    <Image source={require('./img/icon8.png')} style={styles.otherImageStyle}/>
                </View>
            </View>

        );
    }

    activeEvent(event){
      alert(event);
    }

};

const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor:'#dddddd',
        alignItems:'center'
    },
    iconStyle:{
        marginTop:50,
        marginBottom:30,
        width:80,
        height:80,
        borderRadius:40,
        borderWidth:2,
        borderColor:'white'
    },
    textInputStyle:{
        height: 38,
        width:width,
        backgroundColor: 'white',
        marginBottom: 1,
        textAlign:'center'
    },
    loginBtnStyle:{
        height:35,
        width:width*0.9,
        backgroundColor:'#50A5FF',
        marginTop: 30,
        marginBottom:20,
        justifyContent:'center',
        alignItems: 'center',
        borderRadius: 8
    },
    settingStyle:{
        flexDirection:'row',
        width:width*0.9,
        justifyContent: 'space-between'
    },
    otherLoginStyle:{
        flexDirection: 'row',
        alignItems:'center',
        position:'absolute',
        bottom:10,
        left:20
    },
    otherImageStyle:{
        width:50,
        height:50,
        borderRadius:25,
        marginLeft:8
    }

});