登录练习

最新推荐文章于 2019-04-26 17:54:59 发布

FreeBSFree

最新推荐文章于 2019-04-26 17:54:59 发布

阅读量162

点赞数

分类专栏： Rect-Native

本文链接：https://blog.csdn.net/qq_17190231/article/details/88181413

版权

Rect-Native 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

LoginView

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

var screenWidth = require('Dimensions').get('window').width;
var Left = (screenWidth - screenWidth*0.8)/2.0;
export default class LoginView extends Component {
    render() {
        return (
            <View style={styles.container}>
                {/*头像*/}
                <Image style={styles.headerStyle} source={require('./img/oldDoctor.png')}/>

                {/*/!*账号密码输入框*!/*/}
                <TextInput style={styles.textInputStyle} placeholder='请输入账号'/>
                <TextInput style={styles.textInputStyle} placeholder='请输入密码' password={true}/>

                {/*/!*登录*!/*/}
                <View style={styles.loginStyle}>
                    <Text>登录</Text>
                </View>

                {/*/!*无法登录，新用户*!/*/}
                <View style={styles.settingStyle}>
                    <Text style={{padding: (20, 20, 20, 20)}}>无法登录</Text>
                    <Text style={{padding: (20, 20, 20, 20)}}>新用户</Text>
                </View>

                {/*其他登录方式*/}
                <View style={styles.otherLoginStyle}>
                    <Text >其他登录方式</Text>
                    <Image source={require('./img/oldDoctor.png')} style={styles.otherLoinImgeStyle}/>
                    <Image source={require('./img/oldDoctor.png')} style={styles.otherLoinImgeStyle}/>
                    <Image source={require('./img/oldDoctor.png')} style={styles.otherLoinImgeStyle}/>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        backgroundColor: '#F5FCFF',
        alignItems: 'center',
        flex:1,
    },

    // 头像
    headerStyle: {
        marginTop: 25,
        marginBottom: 20,
        width: 80,
        height: 80,
        borderRadius: 40,
        borderWidth: 1,
        borderColor: 'orange'
    },

    // 账号密码
    textInputStyle: {
        marginBottom: 1,
        backgroundColor: 'white',
        width: screenWidth,
        height: 22,
        textAlign: 'center'
    },

    //登录
    loginStyle: {
        marginTop: 19,
        marginBottom: 0,
        backgroundColor: 'blue',
        width: screenWidth * 0.8,
        height: 40,
        borderRadius: 8,

        justifyContent: 'center',
        alignItems: 'center'
    },

    //无法登录，新用户
    settingStyle: {
        width: screenWidth,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
    },

    //其他登录方式
    otherLoginStyle:{
        position:'absolute',
        left:Left,
        right:Left,
        bottom:5,
        flexDirection: 'row',
        alignItems:'center',
    },

    //其他登录方式图片
    otherLoinImgeStyle:{
        marginLeft:20,
        width:40,
        height:40,
    },
});
module.exports = LoginView;

App

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

//引入外部的js文件
var LoginView = require('./LoginView');

export default class App extends Component{
    render(){
        return(
            <LoginView/>
        );
    }
}
const styles = StyleSheet.create({
    container: {
        flex:1,
        backgroundColor:'#F5FCFF',
        justifyContent:'center',
        alignItems:'center'
    },

});