react-native仿qq登录界面布局

最新推荐文章于 2022-12-01 07:55:34 发布

cjs68

最新推荐文章于 2022-12-01 07:55:34 发布

阅读量1.1k

点赞数

分类专栏： Android 文章标签： react

本文链接：https://blog.csdn.net/cjs68/article/details/53640519

版权

Android 专栏收录该内容

9 篇文章 2 订阅

订阅专栏

使用react-native中的TextInput、Text、Image三个组件，编写的一个简单的仿照qq登录的界面。
截图如下：
这里写图片描述
还挺像的哈，代码都写在了index.android.js这个文件中，图片保存在项目下img文件夹中。

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

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

export default class QQlogin extends Component {
    render() {
        return (
            <View style={styles.container}>
                <Image style={{width: 70, height: 70, alignSelf: 'center', marginTop: 30}}
                       source={require('./img/qq.jpg')}/>
                <TextInput style={styles.name}
                           placeholder={'QQ号/手机号/邮箱'}
                           numberOfLines={1}
                           underlineColorAndroid={'transparent'}
                           autoFocus={false}
                           textAlign="center"/>
                <View style={{height: 1, backgroundColor: '#f4f4f4'}}/>
                <TextInput style={styles.password}
                           placeholder={'密码'}
                           numberOfLines={1}
                           underlineColorAndroid={'transparent'}
                           secureTextEntry={true}
                           textAlign="center"
                />
                <View style={styles.login}>
                    <Text>登录</Text>
                </View>
                <View style={{flexDirection: 'row', marginTop: 13, alignItems: 'flex-end'}}>
                    <Text style={{marginLeft: 10, color: '#1E90FF'}}>
                        忘记密码？
                    </Text>
                    <Text style={{
                        marginRight: 10,
                        color: '#1E90FF',
                        alignItems: 'flex-end',
                        textAlign: 'right',
                        flex: 1
                    }}>
                        新用户注册
                    </Text>
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
        container: {
            flex: 1,
            backgroundColor: '#F4F4F4',
        },
        name: {
            backgroundColor: '#FFF',
            height: 50,
            marginTop: 10,
            fontSize: 15,
        },
        password: {
            backgroundColor: '#FFF',
            height: 50,
            fontSize: 15,
        },
        login: {
            height: 40,
            marginLeft: 10,
            marginRight: 10,
            backgroundColor: '#1E90FF',
            marginTop: 15,
            alignItems: 'center',
            justifyContent: 'center',
            borderRadius: 5,
        },
    })
    ;

AppRegistry.registerComponent('QQlogin', () => QQlogin);