react native 前端注册逻辑判断 界面交互

最新推荐文章于 2023-03-20 19:43:10 发布
最新推荐文章于 2023-03-20 19:43:10 发布
阅读量457 收藏
点赞数
分类专栏： React Native React编写原生应用 文章标签： react native
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kingrome2017/article/details/78931422
版权

React Native 版本执行0.57的规则

import React, { Component } from 'react';
import { StyleSheet, Text, View, ScrollView, TextInput, StatusBar, TouchableOpacity, Image, KeyboardAvoidingView } from 'react-native';
import { global } from "../utils/Global";
import { regExp } from "../netWork/RegExp";
import { requestUrl } from "../netWork/Url";
import Button from "../common/Button";// 按钮
import ErrorPrompt from "../common/ErrorPrompt";
import CountDownButton from 'react-native-smscode-count-down';// 倒计时

export default class SignUp extends Component {
    static navigationOptions = {
        header: null,
    };
    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,// 状态栏加载图标
            ErrorPrompt: true,// 提示是否显示
            ErrorText: "",// 提示文字
            ErrorImg: '',// 提示图片
            TimingFlag: false,// 是否在倒计时
            TimingText: "获取验证码",// 获取验证码文字

            phoneReg: true,// 手机号校验
            smsCodeReg: true,// 验证码校验
            doctorPasswordReg: true,// 密码校验
            confirmPasswordReg: true,// 确认密码校验

            doctorPhoneFocus: false,// 手机号焦点
            smsCodeFocus: false,// 验证码焦点
            doctorPasswordFocus: false,// 密码焦点
            confirmPasswordFocus: false,// 确认密码焦点

            confirmPassword: '',// 确认密码
            doctorPhone: '',//手机号码
            doctorPassword: '',//6-18位数字英文字母组合
            smsCode: '',//短信验证码
        }
    }
    getInitalState() {
        // 1初始化state
    }
    componentWillMount() {
        // 2仅调用一次在 render 前
    }
    componentDidMount() {
        // 4获取数据 在 render 后
    }
    render() {
        const { navigate, goBack } = this.props.navigation;
        return (
            <KeyboardAvoidingView
                behavior={global.IOS ? "padding" : null}
                style={{ flex: 1 }}
            >
                <ScrollView
                    keyboardShouldPersistTaps={'handled'}
                    style={styles.container}
                >
                    <StatusBar
                        animated={true}//是否动画
                        hidden={false}//是否隐藏
                        backgroundColor={'#000'}//android 设置状态栏背景颜色
                        translucent={false}//android 设置状态栏是否为透明
                        showHideTransition="fade"//IOS状态栏改变时动画 fade:默认 slide
                        networkActivityIndicatorVisible={this.state.isLoading}//IOS设定网络活动指示器(就是那个菊花)是否显示在状态栏。
                        statusBarStyle={"default"}//ios:白底黑字  android:黑底白字
                    />
                    {/* 后退按钮 */}
                    <TouchableOpacity
                        activeOpacity={.8}
                        style={styles.goBackBtn}
                        onPress={() => goBack()}>
                        <Image
                            style={styles.goBackImg}
                            source={require('../images/arrow_left_grey.png')}
                        />
                    </TouchableOpacity>
                    {/* 主要内容 */}
                    <View style={styles.content}>
                        {/* 文字logo */}
                        <Image
                            style={styles.textLogo}
                            source={require('../images/textLogo.png')}
                        />
                        {/* 手机号-start */}
                        {/* 如果手机获取焦点是一个样式，手机号验证没有通过是一个样式 */}
                        <View style={[styles.inputItem, this.state.doctorPhoneFocus ? styles.doctorPhoneItemFocus : null, this.state.phoneReg ? null : styles.errorStyle]}>
                            {/* 获取焦点显示手机号字段 */}
                            {this.state.doctorPhoneFocus ? <Text style={styles.inputTitle}>手机号</Text> : null}
                            <View style={styles.inputBox}>
                                <TextInput
                                    style={styles.textInput}
                                    placeholder={'请输入手机号'}
                                    placeholderTextColor={global.Colors.placeholder}
                                    onChangeText={(text) => this.setState({ doctorPhone: text })}
                                    defaultValue={this.state.doctorPhone}
                                    underlineColorAndroid={'transparent'}
                                    keyboardType={'numeric'}
                                    onFocus={this.doctorPhoneFocus.bind(this)}
                                    onBlur={this.doctorPhoneBlur.bind(this)}
                                    maxLength={11}
                                />
                                {this.state.doctorPhoneFocus ? <TouchableOpacity
                                    activeOpacity={.8}
                                    onPress={() =>
                                        this.setState({
                                            doctorPhone: '',
                                        })
                                    }
                                    style={styles.clearBtn}
                                >
                                    <Image
                                        style={styles.clearImg}
                                        source={require('../images/clear.png')}
                                    />
                                </TouchableOpacity> : null}
                            </View>
                        </View>
                        {/* 手机号-end */}
                        {/* 验证码-start */}
                        <View style={[styles.inputItem, this.state.smsCodeFocus ? styles.doctorPhoneItemFocus : null, this.state.smsCodeReg ? null : styles.errorStyle]}>
                            {this.state.smsCodeFocus ? <Text style={styles.inputTitle}>校验码</Text> : null}
                            <View style={styles.passwordBox}>
                                <TextInput
                                    style={styles.textInput}
                                    placeholder={'请输入校验码'}
                                    placeholderTextColor={global.Colors.placeholder}
                                    onChangeText={(text) => this.setState({ smsCode: text })}
                                    defaultValue={this.state.smsCode}
                                    underlineColorAndroid={'transparent'}
                                    keyboardType={'numeric'}
                                    maxLength={6}
                                    onFocus={this.smsCodeFocus.bind(this)}
                                    onBlur={this.smsCodeBlur.bind(this)}
                                />
                                <View style={styles.passwordBox}>
                                    {this.state.smsCodeFocus ? <TouchableOpacity
                                        activeOpacity={.8}
                                        onPress={() =>
                                            this.setState({
                                                smsCode: '',
                                            })
                                        }
                                        style={styles.clearBtn}
                                    >
                                        <Image
                                            style={styles.clearImg}
                                            source={require('../images/clear.png')}
                                        />
                                    </TouchableOpacity> : null}
                                    <View style={styles.isolationLine}></View>
                                    {/* <TouchableOpacity
                                    activeOpacity={.8}
                                    onPress={() => { this.getRegisterSms() }}
                                    style={styles.forgetBtn}
                                >
                                    <Text style={styles.forgetText}>获取验证码</Text>
                                </TouchableOpacity> */}
                                    <CountDownButton
                                        style={{
                                            // paddingRight: global.px2dp(10),
                                            // paddingLeft: global.px2dp(10),
                                        }}
                                        textStyle={{
                                            fontSize: global.px2dp(15),
                                            color: global.Colors.color,
                                        }}
                                        timerCount={120}
                                        timerTitle={this.state.TimingText}
                                        enable={true}
                                        onClick={(shouldStartCounting) => {
                                            if (!this.state.doctorPhone) {
                                                this.setState({
                                                    ErrorText: '请输入手机号',
                                                    phoneReg: false,
                                                    ErrorPrompt: false,
                                                    ErrorImg: require('../images/error.png')
                                                })
                                                clearTimeout(this.timer);
                                                this.timer = setTimeout(() => {
                                                    this.setState({
                                                        ErrorPrompt: true,
                                                    })
                                                }, global.TimingCount)
                                                shouldStartCounting(false);
                                            } else if (!regExp.Reg_TelNo.test(this.state.doctorPhone)) {
                                                this.setState({
                                                    ErrorText: '手机号码格式不正确',
                                                    phoneReg: false,
                                                    ErrorPrompt: false,
                                                    ErrorImg: require('../images/error.png')
                                                })
                                                clearTimeout(this.timer);
                                                this.timer = setTimeout(() => {
                                                    this.setState({
                                                        ErrorPrompt: true,
                                                    })
                                                }, global.TimingCount)
                                                shouldStartCounting(false);
                                            } else {
                                                this.getRegisterSms();
                                                shouldStartCounting(true);
                                            }
                                        }}
                                        timerEnd={() => {
                                            this.setState({
                                                TimingText: '重新获取'
                                            })
                                        }} />
                                </View>
                            </View>
                        </View>
                        {/* 验证码-end */}
                        {/* 密码-start */}
                        <View style={[styles.inputItem, this.state.doctorPasswordFocus ? styles.doctorPhoneItemFocus : null, this.state.doctorPasswordReg ? null : styles.errorStyle]}>
                            {this.state.doctorPasswordFocus ? <Text style={styles.inputTitle}>密码</Text> : null}
                            <View style={styles.passwordBox}>
                                <TextInput
                                    style={styles.textInput}
                                    placeholder={'请输入密码6-10字符（数字+字母）'}
                                    placeholderTextColor={global.Colors.placeholder}
                                    onChangeText={(text) => this.setState({ doctorPassword: text })}
                                    defaultValue={this.state.doctorPassword}
                                    underlineColorAndroid={'transparent'}
                                    secureTextEntry={true}
                                    keyboardType={'default'}
                                    onFocus={this.doctorPasswordFocus.bind(this)}
                                    onBlur={this.doctorPasswordBlur.bind(this)}
                                />
                                <View style={styles.passwordBox}>
                                    {this.state.doctorPasswordFocus ? <TouchableOpacity
                                        activeOpacity={.8}
                                        onPress={() =>
                                            this.setState({
                                                doctorPassword: '',
                                            })
                                        }
                                        style={styles.clearBtn}
                                    >
                                        <Image
                                            style={styles.clearImg}
                                            source={require('../images/clear.png')}
                                        />
                                    </TouchableOpacity> : null}
                                </View>
                            </View>
                        </View>
                        {/* 密码-end */}
                        {/* 确认密码-start */}
                        <View style={[styles.inputItem, this.state.confirmPasswordFocus ? styles.doctorPhoneItemFocus : null, this.state.confirmPasswordReg ? null : styles.errorStyle]}>
                            {this.state.confirmPasswordFocus ? <Text style={styles.inputTitle}>密码</Text> : null}
                            <View style={styles.passwordBox}>
                                <TextInput
                                    style={styles.textInput}
                                    placeholder={'请输入密码'}
                                    placeholderTextColor={global.Colors.placeholder}
                                    onChangeText={(text) => this.setState({ confirmPassword: text })}
                                    defaultValue={this.state.confirmPassword}
                                    underlineColorAndroid={'transparent'}
                                    secureTextEntry={true}
                                    keyboardType={'default'}
                                    onFocus={this.confirmPasswordFocus.bind(this)}
                                    onBlur={this.confirmPasswordBlur.bind(this)}
                                />
                                <View style={styles.passwordBox}>
                                    {this.state.confirmPasswordFocus ? <TouchableOpacity
                                        activeOpacity={.8}
                                        onPress={() =>
                                            this.setState({
                                                confirmPassword: '',
                                            })
                                        }
                                        style={styles.clearBtn}
                                    >
                                        <Image
                                            style={styles.clearImg}
                                            source={require('../images/clear.png')}
                                        />
                                    </TouchableOpacity> : null}
                                </View>
                            </View>
                        </View>
                        {/* 确认密码-end */}

                        {/* 注册按钮盒子 */}
                        <View style={styles.btnBox}>
                            <Button text="注册" click={this.signUp.bind(this)} />
                        </View>
                    </View>
                    {this.state.ErrorPrompt ? null : <ErrorPrompt text={this.state.ErrorText} imgUrl={this.state.ErrorImg} />}
                </ScrollView>
            </KeyboardAvoidingView>
        );
    }
    // 账号焦点事件
    doctorPhoneFocus() {
        this.setState({
            doctorPhoneFocus: true,
            phoneReg: true,
        })
    }
    // 账号失去焦点
    doctorPhoneBlur() {
        this.setState({
            doctorPhoneFocus: false,
        })
        if (!this.state.doctorPhone) {
            this.setState({
                ErrorText: '请输入手机号',
                phoneReg: false,
                ErrorPrompt: false,
                ErrorImg: require('../images/error.png'),
            })
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.setState({
                    ErrorPrompt: true,
                })
            }, global.TimingCount)
        } else if (!regExp.Reg_TelNo.test(this.state.doctorPhone)) {
            this.setState({
                ErrorText: '手机号码格式不正确',
                phoneReg: false,
                ErrorPrompt: false,
                ErrorImg: require('../images/error.png'),
            })
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.setState({
                    ErrorPrompt: true,
                })
            }, global.TimingCount)
        } else {
            this.setState({
                phoneReg: true,
            })
        }
    }
    // 验证码获取焦点
    smsCodeFocus() {
        this.setState({
            smsCodeFocus: true,
            smsCodeReg: true,
        })
    }
    // 验证码失去焦点
    smsCodeBlur() {
        this.setState({
            smsCodeFocus: false,
        })
        if (!this.state.smsCode) {
            this.setState({
                ErrorText: '请输入验证码',
                smsCodeReg: false,
                ErrorPrompt: false,
                ErrorImg: require('../images/error.png'),
            })
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.setState({
                    ErrorPrompt: true,
                })
            }, global.TimingCount)
        } else if (!regExp.Reg_Number.test(this.state.smsCode)) {
            this.setState({
                ErrorText: '验证码格式不正确',
                smsCodeReg: false,
                ErrorPrompt: false,
                ErrorImg: require('../images/error.png'),
            })
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.setState({
                    ErrorPrompt: true,
                })
            }, global.TimingCount)
        } else {
            this.setState({
                smsCodeReg: true,
            })
        }
    }
    // 密码焦点事件
    doctorPasswordFocus() {
        this.setState({
            doctorPasswordFocus: true,
            doctorPasswordReg: true,
        })
    }
    // 密码失去事件
    doctorPasswordBlur() {
        this.setState({
            doctorPasswordFocus: false,
        })
        if (!this.state.doctorPassword) {
            this.setState({
                ErrorText: '请输入密码',
                doctorPasswordReg: false,
                ErrorPrompt: false,
                ErrorImg: require('../images/error.png'),
            })
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.setState({
                    ErrorPrompt: true,
                })
            }, global.TimingCount)
        } else if (!regExp.Reg_PassWord.test(this.state.doctorPassword)) {
            this.setState({
                ErrorText: '密码为6-10个字符（数字+字母）',
                doctorPasswordReg: false,
                ErrorPrompt: false,
                ErrorImg: require('../images/error.png'),
            })
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.setState({
                    ErrorPrompt: true,
                })
            }, global.TimingCount)
        } else {
            this.setState({
                doctorPasswordReg: true,
            })
        }
    }
    // 确认密码获取焦点
    confirmPasswordFocus() {
        this.setState({
            confirmPasswordFocus: true,
            confirmPasswordReg: true,
        })
    }
    // 确认密码失去焦点
    confirmPasswordBlur() {
        this.setState({
            confirmPasswordFocus: false,
        })
        if (!this.state.confirmPassword) {
            this.setState({
                ErrorText: '请再次输入密码',
                confirmPasswordReg: false,
                ErrorPrompt: false,
                ErrorImg: require('../images/error.png'),
            })
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.setState({
                    ErrorPrompt: true,
                })
            }, global.TimingCount)
        } else if (!regExp.Reg_PassWord.test(this.state.confirmPassword)) {
            this.setState({
                ErrorText: '密码为6-10个字符（数字+字母）',
                confirmPasswordReg: false,
                ErrorPrompt: false,
                ErrorImg: require('../images/error.png'),
            })
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.setState({
                    ErrorPrompt: true,
                })
            }, global.TimingCount)
        } else if (this.state.confirmPassword != this.state.doctorPassword) {
            this.setState({
                ErrorText: '两次密码不一致',
                confirmPasswordReg: false,
                ErrorPrompt: false,
                ErrorImg: require('../images/error.png'),
            })
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.setState({
                    ErrorPrompt: true,
                })
            }, global.TimingCount)
        } else {
            this.setState({
                confirmPasswordReg: true,
            })
        }
    }
    // 获取验证码
    getRegisterSms() {
        if (!this.state.doctorPhone) {
            this.setState({
                ErrorText: '请输入手机号',
                phoneReg: false,
                ErrorPrompt: false,
                ErrorImg: require('../images/error.png'),
            })
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.setState({
                    ErrorPrompt: true,
                })
            }, global.TimingCount)
        } else if (!regExp.Reg_TelNo.test(this.state.doctorPhone)) {
            this.setState({
                ErrorText: '手机号码格式不正确',
                phoneReg: false,
                ErrorPrompt: false,
                ErrorImg: require('../images/error.png'),
            })
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.setState({
                    ErrorPrompt: true,
                })
            }, global.TimingCount)
        } else {
            this.setState({
                phoneReg: true,
                isLoading: true,
                ErrorText: '正在获取验证码...',
                ErrorPrompt: false,
                ErrorImg: require('../images/loading.png'),
            })
            fetch(requestUrl.registerSms + '?registerPhone=' + this.state.doctorPhone, {
                method: 'GET',
                headers: {

                },
            })
                .then((response) => response.json())
                .then((responseData) => {
                    console.log('responseData', responseData);
                    if (responseData.code == 20000) {
                        this.setState({
                            isLoading: false,
                            ErrorText: '验证码发送成功',
                            ErrorPrompt: false,
                            ErrorImg: require('../images/succeed.png'),
                        })
                        clearTimeout(this.timer);
                        this.timer = setTimeout(() => {
                            this.setState({
                                ErrorPrompt: true,
                            })
                        }, global.TimingCount)
                    } else if (responseData.code == 50008) {
                        this.setState({
                            isLoading: false,
                            ErrorText: '手机号码已注册过',
                            ErrorPrompt: false,
                            ErrorImg: require('../images/error.png'),
                        })
                        clearTimeout(this.timer);
                        this.timer = setTimeout(() => {
                            this.setState({
                                ErrorPrompt: true,
                            })
                        }, global.TimingCount)
                    } else if (responseData.code == 50000) {
                        this.setState({
                            isLoading: false,
                            ErrorText: '系统异常',
                            ErrorPrompt: false,
                            ErrorImg: require('../images/error.png'),
                        })
                        clearTimeout(this.timer);
                        this.timer = setTimeout(() => {
                            this.setState({
                                ErrorPrompt: true,
                            })
                        }, global.TimingCount)
                    } else {

                    }
                })
                .catch((error) => {
                    console.log('error', error);
                });
        }
    }
    // 注册事件
    signUp() {
        if (!this.state.doctorPhone) {
            this.setState({
                ErrorText: '请输入手机号',
                phoneReg: false,
                ErrorPrompt: false,
                ErrorImg: require('../images/error.png'),
            })
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.setState({
                    ErrorPrompt: true,
                })
            }, global.TimingCount)
        } else if (!regExp.Reg_TelNo.test(this.state.doctorPhone)) {
            this.setState({
                ErrorText: '手机号码格式不正确',
                phoneReg: false,
                ErrorPrompt: false,
                ErrorImg: require('../images/error.png'),
            })
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.setState({
                    ErrorPrompt: true,
                })
            }, global.TimingCount)
        } else if (!this.state.smsCode) {
            this.setState({
                ErrorText: '请输入验证码',
                smsCodeReg: false,
                ErrorPrompt: false,
                ErrorImg: require('../images/error.png'),
            })
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.setState({
                    ErrorPrompt: true,
                })
            }, global.TimingCount)
        } else if (!regExp.Reg_Number.test(this.state.smsCode)) {
            this.setState({
                ErrorText: '验证码格式不正确',
                smsCodeReg: false,
                ErrorPrompt: false,
                ErrorImg: require('../images/error.png'),
            })
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.setState({
                    ErrorPrompt: true,
                })
            }, global.TimingCount)
        } else if (!this.state.doctorPassword) {
            this.setState({
                ErrorText: '请输入密码',
                doctorPasswordReg: false,
                ErrorPrompt: false,
                ErrorImg: require('../images/error.png'),
            })
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.setState({
                    ErrorPrompt: true,
                })
            }, global.TimingCount)
        } else if (!regExp.Reg_PassWord.test(this.state.doctorPassword)) {
            this.setState({
                ErrorText: '密码为6-10个字符（数字+字母）',
                doctorPasswordReg: false,
                ErrorPrompt: false,
                ErrorImg: require('../images/error.png'),
            })
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.setState({
                    ErrorPrompt: true,
                })
            }, global.TimingCount)
        } else if (!this.state.confirmPassword) {
            this.setState({
                ErrorText: '请再次输入密码',
                confirmPasswordReg: false,
                ErrorPrompt: false,
                ErrorImg: require('../images/error.png'),
            })
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.setState({
                    ErrorPrompt: true,
                })
            }, global.TimingCount)
        } else if (!regExp.Reg_PassWord.test(this.state.confirmPassword)) {
            this.setState({
                ErrorText: '密码为6-10个字符（数字+字母）',
                confirmPasswordReg: false,
                ErrorPrompt: false,
                ErrorImg: require('../images/error.png'),
            })
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.setState({
                    ErrorPrompt: true,
                })
            }, global.TimingCount)
        } else if (this.state.confirmPassword != this.state.doctorPassword) {
            this.setState({
                ErrorText: '两次密码不一致',
                confirmPasswordReg: false,
                ErrorPrompt: false,
                ErrorImg: require('../images/error.png'),
            })
            clearTimeout(this.timer);
            this.timer = setTimeout(() => {
                this.setState({
                    ErrorPrompt: true,
                })
            }, global.TimingCount)
        } else {
            this.setState({
                isLoading: true,
                ErrorText: '注册中...',
                ErrorPrompt: false,
                ErrorImg: require('../images/loading.png'),
            })
            let formData = new FormData();
            formData.append("doctorPhone", this.state.doctorPhone);
            formData.append("doctorPassword", this.state.doctorPassword);
            formData.append("smsCode", this.state.smsCode);
            fetch(requestUrl.register, {
                method: 'POST',
                headers: {

                },
                body: formData,
            })
                .then((response) => response.json())
                .then((responseData) => {
                    console.log('responseData', responseData);
                    if (responseData.code == 20000) {
                        this.setState({
                            isLoading: false,
                            ErrorPrompt: false,
                            ErrorText: '注册成功',
                            ErrorImg: require('../images/succeed.png'),
                        })
                        clearTimeout(this.timer);
                        this.timer = setTimeout(() => {
                            this.setState({
                                ErrorPrompt: true,
                            })
                            this.props.navigation.navigate("SignIn");
                        }, global.TimingCount)
                    } else if (responseData.code == 50006) {
                        this.setState({
                            isLoading: false,
                            ErrorPrompt: false,
                            smsCodeReg: false,
                            ErrorText: '验证码错误',
                            ErrorImg: require('../images/error.png'),
                        })
                        clearTimeout(this.timer);
                        this.timer = setTimeout(() => {
                            this.setState({
                                ErrorPrompt: true,
                            })
                        }, global.TimingCount)
                    } else {
                        this.setState({
                            isLoading: false,
                            ErrorPrompt: false,
                            ErrorText: '注册失败',
                            ErrorImg: require('../images/error.png'),
                        })
                        clearTimeout(this.timer);
                        this.timer = setTimeout(() => {
                            this.setState({
                                ErrorPrompt: true,
                            })
                        }, global.TimingCount)
                    }
                })
                .catch((error) => {
                    console.log('error', error);
                });
        }
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: global.Colors.colorfff,
        paddingBottom: global.TabBar,
        paddingTop: global.StatusBarHeight,
    },
    // 后退按钮
    goBackBtn: {
        paddingLeft: global.px2dp(24),
        paddingTop: global.px2dp(13),
        paddingRight: global.px2dp(24),
        paddingBottom: global.px2dp(13),
    },
    // 主要内容
    content: {
        paddingRight: global.px2dp(24),
        paddingLeft: global.px2dp(24),
    },
    // 文字logo
    textLogo: {
        width: global.px2dp(131),
        height: global.px2dp(31),
        marginTop: global.px2dp(45),
        marginBottom: global.px2dp(33),
    },
    btnBox: {
        marginTop: global.px2dp(46),
    },
    // 隔离|线
    isolationLine: {
        width: global.Pixel,
        height: global.px2dp(15),
        backgroundColor: global.Colors.text999,
    },
    // 纯输入框
    inputItem: {
        borderBottomWidth: global.Pixel,
        borderBottomColor: global.Colors.colorccc,
    },
    inputBox: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    // 账号输入框
    textInput: {
        flex: 1,
        fontSize: global.px2dp(16),
        color: global.Colors.text333,
        height: global.px2dp(42),
        fontWeight: "500",
    },
    inputTitle: {
        paddingTop: global.px2dp(5),
        fontSize: global.px2dp(14),
        color: global.Colors.text999,
    },
    clearBtn: {
        paddingLeft: global.px2dp(10),
        paddingRight: global.px2dp(10),
    },
    // 密码box
    passwordItem: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    // 密码右侧box
    passwordBox: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
    },
    // 眼睛按钮
    eyesBtn: {
        paddingRight: global.px2dp(14),
        paddingLeft: global.px2dp(14),
    },
    // 忘记密码按钮
    forgetBtn: {
        paddingRight: global.px2dp(10),
        paddingLeft: global.px2dp(10),
    },
    // 忘记密码文字
    forgetText: {
        fontSize: global.px2dp(15),
        color: global.Colors.color,
    },

    // 账号输入焦点样式
    doctorPhoneItemFocus: {
        flexDirection: 'column',
        borderBottomColor: global.Colors.color3b7dc8,
    },
    // 密码输入焦点样式
    passwordItemFocus: {
        flexDirection: 'column',
        alignItems: 'flex-start',
        borderBottomColor: global.Colors.color3b7dc8,
    },
    // 错误样式
    errorStyle: {
        borderBottomColor: global.Colors.colorff0000,
    }
});
kingrome2009
关注
专栏目录
react-native-fifteen-puzzle:用 React Native 试验了 15 个谜题
05-30
总的来说，使用React Native开发15拼图游戏不仅锻炼了前端技术，也提供了与原生平台深度集成的机会，对于提升开发者的技术广度和深度都大有裨益。通过理解这个项目，你不仅可以掌握React Native的基本用法，还能学习...
react简单实现登录注册逻辑（localStorage模拟实现、数据库连接并通过查询数据库实现）
miaomiao博客
07-16 4391
1、搭建样式组件 import styled from 'styled-components'; export const MineContainer = styled.div` flex:1; ` export const PhoneLogin =styled.div` padding:10px; input{ margin:3px; } ` export...
前端 项目里 常用的判断语句 有实例
lzfengquan的博客
07-27 2928
项目里常用的判断 第一种 if判断 if（条件1）{ // 逻辑 可以继续放置if，else，，， }else if（条件2）{ // 逻辑 } else { // 其他条件 // 逻辑 } 第二种 三目运算符判断三种状态 一般是 a == 1 ? '等于1就显示这个值' : '不等于1就显示冒号后边的值' 跟后台数据对接的时候多个条件（也不能太多） 假设 后台给三种值（{0：‘’}，{1: ‘是’}，{2: ‘否’}）， 那么我们前端根据值显示对应内容。 value == 0 ? ' ' :
前端-JS基础之判断
敦煌壁画的博客
12-26 1362
判断 判断是代码流程控制的一个重要环节，绝大多数逻辑的实现都离不开判断。 1. if判断 写法： //单个if if( 条件 ) { //条件为真时执行的代码 } //if else if( 条件 ) { //条件为真时执行的代码 } else { //条件为假时执行的代码 } //多个else if( 条件1 ) { //条件1为真时执行的代码 } else if( 条件2 ) { //条件1假 条件2真时执行的代码 } else if( 条件3 ) {
Web前端学习：章四 -- JavaScript初级（一）-- 逻辑判断常用语句
weixin_45097269的博客
03-20 335
default，当以上的值都不执行，就执行default下的语句。如果不加break，就会穿透，直到遇到有break的语句，停止。类似于if else，但是条件只能用=，所以没有if灵活。条件中只要检测到一个条件已满足，就不会往后继续查条件了；条件中只要检测到一个条件不满足，就不会往后继续查条件了；逻辑顺序：先do一次，然后进行判断、执行、判断、执行…执行语句在条件判定之前，表示，该循环至少会执行一次。当多个条件都要满足，同时满足时，执行。有多个条件时，满足其中之一，即可执行。若条件一直满足就一直往后查。
关于React-Native如何判断当前router路径的方法
https://github.com/Bot80926
06-08 4561
背景：还是那个可爱的产品经理，需要我在app的tab页面和tab二级页面做不同处理，那么问题来了，在主程序中，构建底部tab，我们用的是createBottomTabNavigator这个方法，也就是说，不能用this.props.navigation这个方法去判断当前是在tab主页面还是二级页。好吧，那就看看怎么解决这个问题。 解决方法： RN的官方文档里给出了解答。直接贴代码 impo...
React 实现车牌键盘的示例代码
10-15
我们可以通过定义不同类型的键盘按钮（例如省份按钮、字母按钮、数字按钮、特殊字符按钮等），以及它们所对应的事件处理函数来实现键盘的交互逻辑。整个键盘组件通过props接收不同的属性，如当前是否可见（visible）...
makeit24:“ Make it 24”是使用React Native和Redux构建的IOS手机游戏
05-07
"Make it 24"是一款基于React Native和Redux框架...总的来说，"Make it 24"游戏展示了React Native和Redux在构建复杂交互式移动应用时的强大能力，同时也体现了JavaScript作为动态脚本语言在现代前端开发中的核心地位。
【React框架】教程&案例&相关项目
最新发布
06-19
- **使用条件语句**：使用三元运算符、逻辑与运算符等进行条件判断。 - **列表渲染**：使用数组的map方法遍历数组元素。 - **列表和键**： - **键（Key）**：当渲染列表时，为列表项分配一个唯一的键，提高列表...
前端十年经验 - JavaScript基础知识大纲-思维构图.pdf
04-18
- 移动端框架：Ionic、React Native、Weex用于移动端开发。 - 数据可视化框架：ECharts、D3.js、Highcharts等用于图表绘制。 13. JavaScript的发展和未来： - JavaScript的历史：了解其起源和演进过程。 - ...
React Native 在Windows 环境下，实现登录注册页面一
weixin_37166398的博客
03-03 386
先上效果图： 这个项目主要就是初学 react native 用于熟悉这些组件。 主要实现的效果如上图所示：1.页面的跳转的三种类型 2.布局还有相关组件的熟悉 3.修改入口页面 1.关于入口文件的修改。一般情况下，默认的入口文件是app,js 如何修改，过程是这样的。 第一步，创建我们所需要的的入口文件。我创建的是welcome.js 到此为止，入口文件的设置已经完成。现在我按照自己的步骤来一个一个页面的记录。 首先就是创建文件的过程： import * as React f..
React-native 登陆注册验证
qq_43479946的博客
10-21 2523
import React, { Component } from “react”; import { StyleSheet, Text, View, Image, TouchableHighlight,Button,AsyncStorage } from “react-native”; import { createSwitchNavigator } from “react-navigation...
ReactNative中验证手机号和密码
WindFlyCloud的博客
04-10 2885
/** * 验证是否为手机号 * @param {*} str */ static isPoneAvailable(str) { let myreg = /^[1][3,4,5,7,8][0-9]{9}$/; if (str.length == 0 || str == null) { return false; ...
React Native实现注册和登录
热门推荐
麻豆_matou
01-22 1万+
React-Native-Register-Login-Demo 这是最终的效果图 项目Demo可以到github上下载，方便大家理解。 下面将一步一步带大家完成这个Demo 搭建环境 环境的搭建只需要安装React Native中文网的步骤搭建环境即可，可以选择不同的桌面系统对不同的手机系统的环境的搭建。 这是使用的是最新的0.51版本，想要切换版本的可以点击左上角的
react-native 史上最搓的登陆注册
user_define_race的专栏
08-18 733
import React,{Compontent} from 'react'; import{ AppRegistry,StyleSheet,Text,View,Dimensions,TextInput }from 'react-native'; let widthOfMargin = Dimensions.get("window").width*0.05; export default c
【前端三分钟】优化条件判断语句，让你的 if-else 更健康
前端进阶之路 | 中大厂、外企、国企内推 | 面试培训 | 简历修改
07-11 1055
在之前的文章中曾经介绍过ES6的Map,并给出如何使用Map替换if-else语句的，但那篇文章中只是简单介绍。这篇文章会对判断语句的优化进行进一步的介绍。 if-else let status = 0; if(status === 1) { //todo }else if(status === 2) { //todo }else if(status === 3) { /.........
React-Native通过登录界面学习TextInput组件
FUCK
08-28 8247
同时适配Android和IOS代码注释比较详细/** * Sample React Native App * https://github.com/facebook/react-native * @flow */import React, {Component} from 'react'; import { AppRegistry, StyleSheet, Text,
前端if else_前端如何写出优雅的 if……else 判断
weixin_42514877的博客
01-30 1512
撸代码这么多年，在我见过的大部分写程序的人当中，写逻辑判断的时候都是if……else，或者switch……case，我今天要说的并不是他们不好，而是还有更好的，更优雅的表达方式。在任何语言中，都少不了逻辑判断。在js中，像这样的代码我想大家已经司空见惯了；这里我们默认index为一个可变变量；if(index==='a'){ //满足条件1}elseif(index==='b'){ ...
JavaScript 复杂判断逻辑的优雅写法
小田田的blog
02-08 2044
在某些场景中，我们可能会遇到多个判断条件的情况，针对这种情况，我们通常 会使使用if/else/switch来进行处理，但是多个判断下，这样的写法会有很多的代码，如何解决呢，请继续往下看 首先我们拿if/esle举个栗子，switch写法我就不再这写了 checkStatus(status) { if (status == 1) { this.function1(); ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值