[RN] React Native 实现 类似QQ 登陆页面

[RN] React Native 实现 类似QQ 登陆页面

一、主页index.js

项目目录下index.js

/**
 * @format
 */

import {AppRegistry} from 'react-native';
import App from './src/js/App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

二、App.js

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

//屏幕信息
var dimensions = require('Dimensions');
//获取屏幕的宽度
var {width} = dimensions.get('window');

export default class App extends Component<Props> {
    render() {
        return (
            <View style={styles.container}>
                {/*头像*/}
                <Image style={styles.circleImage} source={require('./logo.png')}/>
                {/*账户*/}
                <TextInput
                    style={styles.textInput}
                    placeholder={'请输入用户名'}
                    //输入框下划线
                    underlineColorAndroid={'transparent'}/>
                {/*密码*/}
                <TextInput
                    style={styles.textInput}
                    placeholder={'请输入密码'}
                    secureTextEntry={true}
                    underlineColorAndroid={'transparent'}/>
                {/*无法登录  新用户*/}
                {/*登录*/}
                <TouchableOpacity style={styles.btnStyle}>
                    <Text style={styles.loginText}>登录</Text>
                </TouchableOpacity>
                {/*无法登录  新用户*/}
                <View style={styles.canNot}>
                    <Text style={{color: '#4398ff'}}>无法登录</Text>
                    <Text style={{color: '#4398ff'}}>新用户</Text>
                </View>
                {/*其它登录方式*/}
                <View style={styles.loginTheWay}>
                    <Text>其它登录方式：</Text>
                    <Image style={styles.image} source={require('./alipay.png')}/>
                    <Image style={styles.image} source={require('./wechat.png')}/>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flex: ,
        flexDirection: 'column',
        backgroundColor: '#dddddd',
        //设置次轴的对齐方式
        alignItems: 'center',
    },
    circleImage: {
        width: ,
        height: ,
        borderRadius: ,
        borderWidth: ,
        borderColor: 'white',
        marginTop: ,
        marginBottom: ,
    },
    textInput: {
        height: ,
        width: width,
        marginBottom: ,
        backgroundColor: 'white',
        textAlign: 'left',
    },
    canNot: {
        width: width - ,
        marginTop: ,
        flexDirection: 'row',
        alignItems: 'center',
        //设置主轴为两端对齐
        justifyContent: 'space-between',
    },
    loginTheWay: {
        flexDirection: 'row',
        //设置次轴的对齐方式
        alignItems: 'center',
        justifyContent: 'flex-start',
        //绝对定位
        position: 'absolute',
        // //距离底部还有30 距离左边还有10 这样的一个位置
        bottom: ,
        left: ,
    },
    image: {
        width: ,
        height: ,
        marginLeft: ,
        borderRadius: ,
    },
    btnStyle: {
        height: ,
        width: width - ,
        borderRadius: ,
        marginTop: ,
        backgroundColor: '#4398ff',
        justifyContent: 'center',
    },
    loginText: {
        textAlign: 'center',
        color: 'white',
        textAlignVertical: 'center',
    }

});

具体代码见Github：

https://github.com/wukong1688/RN-BaseLoginPage

本博客地址： wukong1688

本文原文地址：https://www.cnblogs.com/wukong1688/p/10811163.html

转载请注明出处！谢谢~~