React Native---QQ登录界面

React Native

QQ登录界面

QQ登录截图

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

// 获取屏幕的宽和高
let {width,height} = Dimensions.get('window');

class LoginView extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                {/*头像*/}
                <Image
                    style={styles.iconStyle}
                    source={require('./img/icon.png')}/>

                {/*账号和密码*/}
                <TextInput
                    style={styles.textInputStyle}
                    placeholder={'请输入用户名'} />
                <TextInput
                    style={styles.textInputStyle}
                    placeholder='请输入密码'
                    password={true}/>

                {/*登录*/}
                <View style={styles.loginBtnStyle}>
                    <Text style={{color:'white'}}>登录</Text>
                </View>

                {/*设置*/}
                <View style={styles.settingStyle}>
                    <Text>无法登录</Text>
                    <Text>新用户</Text>
                </View>

                {/*其他的登录方式*/}
                <View style={styles.otherStyle}>
                    <Text>其他登录方式：</Text>
                    <Image style={styles.otherImageStyle} source={require('./img/icon3.png')}></Image>
                    <Image style={styles.otherImageStyle} source={require('./img/icon7.png')}></Image>
                    <Image style={styles.otherImageStyle} source={require('./img/icon8.png')}></Image>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        // 侧轴的对齐方式
        alignItems:'center',
        backgroundColor: '#dddddd'
    },
    iconStyle: {
        width:80,
        height:80,
        borderRadius:40,
        borderWidth:2,
        borderColor:'white',
        marginTop:50,
        marginBottom:50
    },
    textInputStyle: {
        width:width,
        height:40,
        backgroundColor:'white',
        textAlign:'center',
        marginBottom:1
    },
    loginBtnStyle: {
        width: width*0.9,
        height: 40,
        backgroundColor:'blue',
        alignItems:'center',
        justifyContent:'center',
        marginTop:30,
        marginBottom: 20,
        borderRadius:10
    },
    settingStyle: {
        width: width*0.95,
        height: 40,
        flexDirection:'row',
        justifyContent:'space-between',
        alignItems:'center',
    },
    otherStyle: {
        flexDirection:'row',
        alignItems:'center',
        position:'absolute',
        bottom:10,
        left: 20
    },
    otherImageStyle: {
        width:40,
        height:40,
        borderRadius:25,
        marginLeft:10
    }
});

这里需要注意的是，在获取到屏幕的宽高参数后，竟然可以在布局中使用