efunbox-mobile-8/pages/Login.js

/* 
 * 登录
*/
import React, { Component } from "react";
import {
    Platform,
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    ImageBackground,
    Button,
    StatusBar,
    Modal,
    TouchableHighlight,
    DeviceEventEmitter,
    TextInput,
    ScrollView
} from "react-native";
import BasePage from "./BasePage";
import Dimensions from './utils/dimensions';
import ShopBox from "./components/ShopBox";
import TopicTitle from './components/TopicTitle';
import ScrollRow from './components/ScrollRow';

export default class Login extends BasePage {
    state = {


    };
    render() {
        return (
            <View style={styles.wrapper}>
                <View style={styles.jump}>
                    <TouchableOpacity style={styles.jumpBtn}>
                        <Text style={styles.jumpText}>跳过</Text>
                        <Image source={require('./images/common/arrowRight.png')}></Image>
                    </TouchableOpacity>
                </View>
                <View style={styles.phoneNumberBox}>
                    <Text style={styles.phoneNumber}>手机号</Text>
                    <TextInput
                        style={styles.phoneText}
                        onChangeText={(text) => this.setState({ text })}
                        value={this.state.text}
                        placeholder={'请输入手机号'}
                    />
                </View>
                <View style={styles.signNumberBox}>
                    <Text style={styles.phoneNumber}>验证码</Text>
                    <View style={styles.signNumberLine2}>
                        <TextInput
                            style={styles.signText}
                            onChangeText={(text) => this.setState({ text })}
                            value={this.state.text}
                            placeholder={'请输入验证码'}
                        />
                        <TouchableOpacity>
                            <Text style={styles.getSign}>获取验证码</Text>
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={styles.loginIn}>
                    <Text style={styles.loginText}>登录</Text>
                </View>
                <View style={styles.wechatLogin}>
                    <Image source={require('./images/common/wechat.png')}></Image>
                    <Text style={styles.wechatLoginText}>微信登录</Text>
                    <Image source={require('./images/common/arrowRight.png')}></Image>
                </View>
            </View>
        )
    }

}

const styles = StyleSheet.create({
    wrapper: {
        flex: 1
    },
    jumpText: {
        color: '#3e3e3e',
        fontSize: 16,
        marginRight: 4
    },
    jump: {
        // width: Dimensions.width,
        flex: 2,
        alignItems: 'flex-end',
        justifyContent: 'center',
        paddingHorizontal: '8%'
    },
    jumpBtn: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'center'
    },
    phoneNumberBox: {
        flex: 2,
        paddingHorizontal: '8%'
    },
    phoneNumber: {
        color: '#3e3e3e',
        fontSize: 18,
        marginBottom: 10
    },
    phoneText: {
        width: '100%',
        height: Dimensions.getHeight(50),
        borderRadius: 25,
        backgroundColor: '#f3f3f3'
    },
    signNumberBox: {
        flex: 2,
        paddingHorizontal: '8%'
    },
    signNumberLine2: {
        flexDirection: 'row',
        width: Dimensions.width,
    },
    signText: {
        width: '54%',
        height: Dimensions.getHeight(50),
        borderRadius: 25,
        backgroundColor: '#f3f3f3',
        marginRight: 9
    },
    getSign: {
        width: 105,
        height: Dimensions.getHeight(50),
        borderRadius: 25,
        backgroundColor: '#38da84',
        lineHeight: Dimensions.getHeight(50),
        color: '#fff',
        fontSize: 16,
        textAlign: 'center'
    },
    loginIn: {
        flex: 3,
        paddingHorizontal: '8%'
    },
    loginText: {
        width: '100%',
        height: Dimensions.getHeight(50),
        backgroundColor: '#63aeff',
        textAlign: 'center',
        lineHeight: Dimensions.getHeight(50),
        color: '#fff',
        fontSize: 20,
        borderRadius: 25
    },
    wechatLogin: {
        flex: 3,
        flexDirection: 'row',
        paddingHorizontal: '33.6%',
        alignItems: 'center',
        justifyContent: 'center',

    },
    wechatLoginText: {
        fontSize: 16,
        color: '#3e3e3e',
        marginHorizontal: 6
    }
})