react native 更换手机号 验证码输入框

最新推荐文章于 2024-09-10 08:29:54 发布
最新推荐文章于 2024-09-10 08:29:54 发布
阅读量2.6k 收藏 2
点赞数
分类专栏： React Native React编写原生应用
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kingrome2017/article/details/89296954
版权

React Native 版本执行0.57的规则


import React, { Component } from 'react';
import { StyleSheet, Text, View, TextInput, ScrollView, KeyboardAvoidingView, Image, TouchableOpacity, StatusBar } from 'react-native';
import LinearGradient from 'react-native-linear-gradient'; //按钮渐变
import CountDownButton from 'react-native-smscode-count-down';// 倒计时
import { regExp } from "../../network/RegExp";
import { global } from '../../utils/Global';
import { requestUrl } from '../../network/Url';// 请求url
import Fetch from '../../network/Fetch';
import Loading from '../../components/Loading';
import Nav from '../../components/Nav';
import * as Public from '../../utils/Public'

export default class ReplaceTel extends Component {
    constructor(props) {
        super(props);
        this.state = {
            isLoading: false,
            iphone: '', //手机号
            identCode: '', //验证码
            iPhoneValidate: false,// 手机号验证
            smsCodeValidate: false,// 验证码验证
            CodeValidate: false,// 第一步验证码验证
            TimingText: "获取验证码",// 获取验证码文字
            ValidateFlag: true,// 展示第一步校验
            length: 6, //输入框的个数
            codeInput: "", //第一步验证码输入
            isShowTime: false,//是否显示自定义倒计时
            timeText: "60", //自定义倒计时
        }
    }
    componentWillMount() {

    }
    componentDidMount() {
        if (UserInfo.phone) {
            this.setState({
                isShowTime: true
            })
            //获取验证码
            this._getRegisterSms();
            //获取倒计时
            this.renderTime()
        }
    }
    render() {
        const { navigate, goBack } = this.props.navigation;
        return (
            <KeyboardAvoidingView
                behavior={IOS ? "padding" : null}
                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"}//状态栏样式 default	默认（IOS为白底黑字、Android为黑底白字）
                    barStyle={"default"}// 状态栏文本的颜色。
                />
                <Nav title={"更换手机号"} leftClick={() => { goBack() }} />
                <ScrollView
                    keyboardShouldPersistTaps={"handled"}
                >
                    {/* 第一步验证原手机号 */}
                    {
                        this.state.ValidateFlag ?
                            <View style={styles.oneStep}>
                                <View style={styles.oneStepTit}>
                                    <Text style={styles.oneStepTxt}>请输入当前手机号</Text>
                                    <Text style={[styles.oneStepTxt, { marginLeft: Px2dp(5), marginRight: Px2dp(5) }]}>{Public.formatPhone(UserInfo.phone)}</Text>
                                    <Text style={styles.oneStepTxt}>的验证码</Text>
                                </View>
                                <View style={{
                                    position: 'relative',
                                    justifyContent: "center",
                                    alignItems: "center",
                                    flexDirection: "row",
                                    marginTop: Px2dp(20),
                                }}>
                                    <View style={{ width: SCREEN_WIDTH, height: Px2dp(40), justifyContent: "center", alignItems: "center", flexDirection: "row", overflow: "hidden" }}>
                                        {this._tempDomArr()}
                                    </View>
                                    <TextInput
                                        ref={"_input"}
                                        key={"one"}
                                        style={{ opacity: 0, width: SCREEN_WIDTH + Px2dp(60), height: Px2dp(40), position: 'absolute', top: 0, left: -Px2dp(60), zIndex: 10, }}
                                        returnKeyType={"done"}// 键盘确定按钮类型 done/go/next/search/send
                                        placeholderTextColor="#999"
                                        keyboardType="numeric"
                                        maxLength={6}
                                        autoFocus={true}
                                        caretHidden={true}
                                        contextMenuHidden={true} // 禁用粘贴
                                        defaultValue={this.state.codeInput}
                                        underlineColorAndroid={'transparent'}
                                        onChangeText={(text) => {
                                            if (regExp.Reg_Number.test(text)) {
                                                this.setState({
                                                    CodeValidate: true
                                                })
                                            }
                                            else {
                                                this.setState({
                                                    CodeValidate: false
                                                })
                                            }
                                            this.setState({ codeInput: text })
                                        }}
                                    />
                                </View>
                                {/* 倒计时 */}
                                <View style={{ justifyContent: "center", alignItems: "center", marginTop: Px2dp(20) }}>
                                    {
                                        this.state.isShowTime ?
                                            <View style={{ height: Px2dp(44), justifyContent: "center" }}>
                                                <Text style={{ fontSize: Px2dp(12), color: "#9B9B9BFF" }}>重新获取（{this.state.timeText}）</Text>
                                            </View>
                                            :
                                            <CountDownButton
                                                style={{ marginBottom: Px2dp(5) }}
                                                textStyle={{
                                                    fontSize: Px2dp(12),
                                                    color: "rgba(44,125,201,1)"
                                                }}// 文字样式
                                                timerCount={60}// 倒计时时长
                                                timerTitle={this.state.TimingText}// 提示文字
                                                enable={true}
                                                onClick={(shouldStartCounting) => {
                                                    this._getRegisterSms()
                                                    shouldStartCounting(true); //重置验证码状态
                                                }}
                                                timerEnd={() => {
                                                    this.setState({
                                                        TimingText: '重新获取',
                                                        iPhoneFocus: true,
                                                    })
                                                }}// 倒计时结束
                                            />
                                    }
                                    <TouchableOpacity activeOpacity={0.8} onPress={() => {
                                        this._verifyAuthCode()
                                    }}>
                                        <LinearGradient
                                            start={{ x: 0, y: 1 }}
                                            end={{ x: 1, y: 1 }}
                                            colors={['#EF6666', '#EA2424']}
                                            locations={[0, 1.0]}
                                            style={[styles.LoginBtnLg, this.state.CodeValidate ? { opacity: 1 } : { opacity: 0.5 }]}>
                                            <Text style={styles.LoginBtnTxt}>下一步</Text>
                                        </LinearGradient>
                                    </TouchableOpacity>
                                </View>
                            </View>
                            :   //第二步更新手机号
                            <View style={styles.LoginBox}>
                                {/* 填写更新手机号 */}
                                <Text style={{ width: Px2dp(300), lineHeight: Px2dp(15), marginBottom: Px2dp(35), fontSize: Px2dp(12), color: "#504949FF", }}>解除后该手机号的信息将全部转移至新绑定的手机中， 请知悉。</Text>
                                <View style={styles.LoginAccount}>
                                    <Image style={styles.LoginAccountImg} source={require('../../images/login_account.png')} />
                                    <TextInput
                                        key={"phone"}
                                        style={styles.input}
                                        returnKeyType={"done"}// 键盘确定按钮类型 done/go/next/search/send
                                        placeholderTextColor="#999"
                                        keyboardType="numeric"
                                        placeholder="请输入手机号"
                                        underlineColorAndroid={'transparent'}
                                        maxLength={11}
                                        onChangeText={(text) => {
                                            if (regExp.Reg_TelNo.test(text)) {
                                                this.setState({
                                                    iPhoneValidate: true
                                                })
                                            }
                                            else {
                                                this.setState({
                                                    iPhoneValidate: false
                                                })
                                            }
                                            this.setState({ iphone: text })
                                        }}
                                        onBlur={() => {
                                            this.iphoneBlur()
                                        }}
                                    />
                                </View>
                                {/* 填写更新验证码 */}
                                <View style={styles.LoginAccount}>
                                    <Image style={styles.identCodeImg} source={require('../../images/ident_code.png')} />
                                    <TextInput
                                        key={"code"}
                                        style={styles.input}
                                        returnKeyType={"done"}// 键盘确定按钮类型 done/go/next/search/send
                                        placeholderTextColor="#999"
                                        keyboardType="numeric"
                                        placeholder="请输入验证码"
                                        defaultValue={this.state.identCode}
                                        maxLength={6}
                                        underlineColorAndroid={'transparent'}
                                        onChangeText={(text) => {
                                            if (regExp.Reg_Number.test(text)) {
                                                this.setState({
                                                    smsCodeValidate: true
                                                })
                                            }
                                            else {
                                                this.setState({
                                                    smsCodeValidate: false
                                                })
                                            }
                                            this.setState({ identCode: text })
                                        }}
                                        onBlur={() => {
                                            this.smsCodeBlur()
                                        }}
                                    />
                                    {/* 更新倒计时 */}
                                    <CountDownButton
                                        style={[styles.getIdentCode, this.state.iPhoneValidate ? { opacity: 1 } : null]}
                                        textStyle={{
                                            fontSize: Px2dp(12),
                                            color: Colors.white
                                        }}// 文字样式
                                        timerCount={60}// 倒计时时长
                                        timerTitle={this.state.TimingText}// 提示文字
                                        enable={true}
                                        onClick={(shouldStartCounting) => {
                                            //校验新手机号是否已注册
                                            if (!this.state.iPhoneValidate) {
                                                ToastShow({ "text": '请输入正确的手机号' })
                                                shouldStartCounting(false);
                                            } else {
                                                Fetch(requestUrl.URL, {
                                                    "phone": this.state.iphone,
                                                }).then(data => {
                                                    console.log(data)
                                                    if (data.status == "SUCCESS") {
                                                        if (this.state.iPhoneValidate) {
                                                            if (!this.state.iphone) {
                                                                shouldStartCounting(false);
                                                            }
                                                            else {
                                                                this._getRegisterSms(this.state.iphone)
                                                                shouldStartCounting(true); //重置验证码状态
                                                            }
                                                        }
                                                    } else if (data.status == "ERROR") {
                                                        ToastShow({ "text": data.msg })
                                                        shouldStartCounting(false);

                                                    } else {
                                                        ToastShow({ "text": '手机号校验失败' })
                                                        shouldStartCounting(false);

                                                    }
                                                })
                                            }
                                        }}
                                        timerEnd={() => {
                                            this.setState({
                                                TimingText: '重新获取',
                                                iPhoneFocus: true
                                            })
                                        }}// 倒计时结束
                                    />
                                </View>
                                {/* 立即绑定 */}
                                <TouchableOpacity activeOpacity={0.8} onPress={() => {
                                    if (this.state.iPhoneValidate && this.state.smsCodeValidate) {
                                        this._replacePhone()
                                    }
                                }}>
                                    <LinearGradient
                                        start={{ x: 0, y: 1 }}
                                        end={{ x: 1, y: 1 }}
                                        colors={['#EF6666', '#EA2424']}
                                        locations={[0, 1.0]}
                                        style={[styles.LoginBtnLg, this.state.iPhoneValidate && this.state.smsCodeValidate ? { opacity: 1 } : { opacity: 0.5 }]}>
                                        <Text style={styles.LoginBtnTxt}>立即绑定</Text>
                                    </LinearGradient>
                                </TouchableOpacity>
                                <View style={{ flex: 1 }}></View>
                            </View>
                    }
                </ScrollView>
                {this.state.isLoading ? <Loading /> : null}
            </KeyboardAvoidingView>
        );
    }
    //倒计时
    renderTime() {
        let timeCount = 60// 总秒数
        let timer = setInterval(() => {
            timeCount -= 1;
            this.setState({
                timeText: timeCount,
            })
            if (timeCount <= 0) {
                // 倒计时结束
                clearInterval(timer);
                this.setState({
                    isShowTime: false
                })
            }
        }, 1000)
    }
    //手机号失去焦点
    iphoneBlur() {
        if (!this.state.iphone) {
            ToastShow({ "text": '请输入手机号' })
        }
        else if (!regExp.Reg_TelNo.test(this.state.iphone)) {
            ToastShow({ "text": '请输入正确的手机号' })
        } else {
            return true
        }
    }
    //验证码失去焦点
    smsCodeBlur() {
        if (!this.state.identCode.length) {
            ToastShow({ "text": '请输入验证码' })
        }
        else if (!regExp.Reg_Number.test(this.state.identCode)) {
            ToastShow({ "text": '请输入正确的验证码格式' })
        }
        else {
            return true
        }
    }
    //渲染展示input
    _tempDomArr() {
        let tempDomArr = [];
        for (var i = 0; i < this.state.length; i++) {
            tempDomArr.push(
                <View key={i} style={styles.inputBoxItem}>
                    <Text>{this.state.codeInput.length >= i + 1 ? this.state.codeInput[i] : ""}</Text>
                </View>
            )
        }
        return tempDomArr;
    }
    // 获取第一步验证码
    _getRegisterSms(iphone) {
        Fetch(requestUrl.URL, { "phone": iphone ? iphone : UserInfo.phone }).then(data => {
            if (data.status == "SUCCESS") {
                this.setState({
                    iPhoneFocus: false
                })
                ToastShow({ "text": '验证码发送成功' })
            } else {
                ToastShow({ "text": '获取验证码失败' })
            }
        })
    }
    //第一步校验原手机号
    _verifyAuthCode() {
        if (!this.state.codeInput) {
            ToastShow({ "text": '请输入验证码' })
        }
        else if (!regExp.Reg_Number.test(this.state.codeInput)) {
            ToastShow({ "text": '请输入正确的验证码格式' })
        }
        else {
            Fetch(requestUrl.URL, {
                "phone": UserInfo.phone, 'authCode': this.state.codeInput, "userId": UserInfo.id
            }).then(data => {
                console.log(data)
                if (data.status == "SUCCESS") {
                    this.setState({
                        ValidateFlag: false,
                    })
                } else if (data.status == "1") {
                    this.setState({
                        codeInput: '',
                    })
                    this.refs._input.focus();
                    ToastShow({ "text": data.msg })
                } else {
                    this.setState({
                        codeInput: '',
                    })
                    this.refs._input.focus();
                    ToastShow({ "text": '手机号校验失败' })
                }
            })
        }
    }
    // 立即绑定更新手机号
    _replacePhone() {
        if (!this.state.iphone || !this.state.identCode) {
            ToastShow({ "text": '请输入正确的信息' })
        }
        else if (!regExp.Reg_TelNo.test(this.state.iphone)) {
            ToastShow({ "text": '请输入正确的手机号' })
        }
        else if (!this.state.identCode) {
            ToastShow({ "text": '请输入验证码' })
        }
        else if (!regExp.Reg_Number.test(this.state.identCode)) {
            ToastShow({ "text": '请输入正确的验证码格式' })
        }
        else {
            this.setState({
                isLoading: true,
            })
            Fetch(requestUrl.verificationPhone, {
                "phone": this.state.iphone,
            }).then(data => {
                console.log(data)
                if (data.status == "SUCCESS") {
                    Fetch(requestUrl.url, { "phone": this.state.iphone, "userId": UserInfo.id, 'authCode': this.state.identCode }).then(data => {
                        console.log(data)
                        if (data.status == "SUCCESS") {
                            let tempUserInfo = UserInfo;
                            tempUserInfo.phone = this.state.iphone;
                            Public.setItem("userInfo", tempUserInfo);
                            this.props.navigation.state.params.callback(this.state.iphone);
                            this.props.navigation.goBack();
                        } else if (data.status == "ERROR") {
                            this.setState({
                                isLoading: false,
                            })
                            ToastShow({ "text": data.msg })
                        } else {
                            this.setState({
                                isLoading: false,
                            })
                            ToastShow({ "text": '绑定失败' })
                        }
                    })
                } else {
                    this.setState({
                        isLoading: false,
                    })
                    ToastShow({ "text": data.msg })
                }
            })
        }
    }
}
const styles = StyleSheet.create({
    container: {
        backgroundColor: Colors.white,
        justifyContent: "center",
        flex: 1,
    },
    LoginBox: {
        justifyContent: "center",
        alignItems: "center",
        flex: 1,
        paddingTop: Px2dp(40)
    },
    //通用input盒子
    LoginAccount: {
        width: Px2dp(306),
        paddingBottom: Px2dp(7),
        flexDirection: "row",
        alignItems: "center",
        justifyContent: 'space-between',
        borderBottomWidth: Pixel,
        borderBottomColor: '#ececec',
        marginBottom: Px2dp(32)
    },
    LoginAccountImg: {
        marginRight: Px2dp(10)
    },
    identCodeImg: {
        marginRight: Px2dp(7)
    },
    input: {
        flex: 1,
        fontSize: Px2dp(16),
        padding: 0,
    },
    //按钮及文字
    LoginBtn: {
        width: Px2dp(306),
        backgroundColor: Colors.red,
        height: Px2dp(50),
        marginTop: Px2dp(2),
        justifyContent: 'center', alignItems: 'center',
    },
    LoginBtnLg: {
        width: Px2dp(306),
        height: Px2dp(50),
        marginTop: Px2dp(2),
        opacity: 0.5,
        justifyContent: 'center', alignItems: 'center',
    },
    LoginBtnTxt: {
        fontSize: Px2dp(16),
        color: Colors.white,
    },
    //获取验证码及文字
    getIdentCode: {
        width: Px2dp(89),
        height: Px2dp(26),
        backgroundColor: "#EA2424",
        opacity: 0.5,
        borderRadius: Px2dp(13),
        justifyContent: "center",
        alignItems: "center"
    },
    getIdentCodeTxt: {
        fontSize: Px2dp(12),
        color: Colors.white
    },
    // 第一步
    oneStep: {
        marginTop: Px2dp(110),
        flex: 1,
    },
    oneStepTit: {
        flexDirection: "row",
        justifyContent: "center",
        alignItems: "center"
    },
    oneStepTxt: {
        fontSize: Px2dp(16),
        color: Colors.text333
    },
    inputBox: {
        flexDirection: "row",
        justifyContent: "center",
        alignItems: 'center',
        marginTop: Px2dp(40),
    },
    inputBoxItem: {
        borderBottomWidth: Pixel,
        borderBottomColor: "rgba(216,216,216,1)",
        width: Px2dp(30),
        height: Px2dp(30),
        marginRight: Px2dp(10),
        textAlign: "center",
        padding: 0,
        alignItems: 'center',
        justifyContent: 'center',
    },
});
kingrome2009
关注
专栏目录
react-native键盘弹起遮挡输入框
shizhihua11的博客
04-03 784
import React, { Component } from 'react'; import { Platform, StyleSheet, Text, View, Image, FlatList, Dimensions, WebView, TouchableOpacity, TextInput, Na...
记录ReactNative中使用TextInput遇到的问题
weixin_45672971的博客
09-06 976
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、pandas是什么？二、使用步骤1.引入库2.读入数据总结 前言 提示：这里可以添加本文要记录的大概内容： 例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。 提示：以下是本篇文章正文内容，下面案例可供参考 一、pandas是什么？ 示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。 二、使用步骤 1.引入库 代码
react-native-sms-verifycode:一个React Native组件，用于填写SMS验证码或密码（适用于Android和iOS）
05-17
屏幕截图 支持输入密码，与iOS和Android兼容 在Android上 在iOS上 使用密码 设计思路可能像这样，显示出出色的手绘效果 :see-no-evil_monkey: :see-no-evil_monkey: :see-no-evil_monkey: 安装 $ npm install react-native-sms-verifycode --save 用法 基本用法 输入完成后设置回调函数，即可获取用户输入的内容。 import SMSVerifyCode from 'react-native-sms-verifycode' ... < SMSVerifyCode xss=removed xss=removed> ( this . verifycode = ref ) } onInputCompleted = { this . onInputCompleted } containerPaddingHorizontal = { 30 } / > onInputCompleted = (
React Native 电话号码输入组件教程
gitblog_00855的博客
08-26 329
React Native 电话号码输入组件教程 react-native-phone-number-inputReact Native component for phone number.项目地址:https://gitcode.com/gh_mirrors/re/react-native-phone-number-input 项目介绍 react-native-phone-number-in...
探索高效便捷的二维码扫描体验：react-native-qr-scanner
最新发布
gitblog_01024的博客
09-10 445
探索高效便捷的二维码扫描体验：react-native-qr-scanner react-native-qr-scanner一个二维码扫描组件，依赖react-native-camera项目地址:https://gitcode.com/gh_mirrors/re/react-native-qr-scanner 在移动应用开发中，二维码扫描功能已成为许多应用不可或缺的一部分。无论是用于支付、身份验...
手机验证码自动跳转下一个输入框之功能
weixin_30486037的博客
09-09 560
手机验证码自动跳转下一个输入框之功能 转载于:https://www.cnblogs.com/hool/p/11489849.html
React-PhoneNr-Input:带有国家_地区选择器的直观电话号码输入，用于国际和国内电话号码
05-07
React-PhoneNr-输入 概述 React-PhoneNr-Input是一个易于使用的电话号码输入字段，可以选择国家/地区，默认情况下，它会直观地猜测国家/地区，并格式化输入的电话号码 对于国际电话号码，可以使用下拉菜单从中选择国家。 通过传递prop format='NATIONAL'和默认国家/地区（例\u5982defaultCountry='DE'将显示一个简单的输入字段，该字段将使用defaultCountry prop声明的国家格式对输入的电话号码进行格式化。 全部用不到300行代码编写 演示和示例 安装 npm： npm i -S react-phonenr-input 纱： yarn add react-phonenr-input 道具： 名称 类型 默认 描述 onChange （数据：电话号码）=>无效 必需的 返回输入的电话号码或电话号码对象的函数/方法
开源推荐：react-native-sms-verifycode——高效验证码输入组件
gitblog_00091的博客
06-18 426
开源推荐：react-native-sms-verifycode——高效验证码输入组件 去发现同类优质开源项目:https://gitcode.com/ 验证码是应用中常见的安全验证手段之一，尤其是在登录或注册场景下，其重要性不言而喻。一个好的验证码输入体验不仅能够提升用户体验，还能增加应用程序的安全性和专业度。今天我们要向大家推荐的是一个高质量的React Native组件——react-nat...
React Native实现简单的登录功能(推荐)
11-24
placeholder='QQ号/手机号/邮箱' /> <Text style={styles.divider}></Text> underlineColorAndroid='transparent' style={styles.textinput} placeholder='密码' secureTextEntry={true} /> {/* ...
ReactNative（学习部署）{样式使用、图片、文本、布局、按钮、活动提示器、状态栏和背景图、开关和文本输入框}
weixin_59684494的博客
01-13 862
RN环境部署视频 链接: https://pan.baidu.com/s/1Z5msrmcoLwrcHwQIRVqKKA 提取码: abwu RN部署资源 链接: https://pan.baidu.com/s/19eFVsVXoB0viPUK1ZxhmEA 提取码: rphi ReactNative学习 项目包目录结构 在RN代码编写过程中，开发者服务器是热更新服务器，代码写完之后会立即同步到模拟器。代码没写完，就同步过去了，会造成模拟器里APP崩溃。不要使用vscode里...
「前端」React中限制输入框仅输入数字或手机号
Jack's Blog
07-25 1万+
很久没有写博客了，最近在自己做项目的过程中遇到了一些坑，踩完之后怕自己忘了，写下来记录一下。 在React中，我们在修改输入框的内容是会调用到onChange函数，然后通过onChange函数实现修改state的功能，在这个过程中如何实现对输入内容的限制呢？ 例如在登录的时候，对手机号和验证码的输入做限制： 解决办法1： 直接使用antd中的Form组件，使用getFieldDecorator方...
一个用于填写短信验证码或密码的ReactNative组件适配android和iOS
08-10
一个用于填写短信验证码或密码的React Native组件， 适配android和iOS
react-native-sms, 支持iOS和Android的短信发送方.zip
09-17
react-native-sms, 支持iOS和Android的短信发送方 react-native-sms用户定义的SendSMS使用这个 rn 组件发送带有回调 (completed/cancelled/error). iOS和Android的短信。目前，只支持用户发送短信。 this react-na
react-telephone-input:用于输入和验证国际电话号码的React组件
04-30
国际电话输入的Reactjs组件 IMP ：从5. *起，withStyles文件不会捆绑在dist中。 如果要使用CSS，可以将CSS文件直接导入到模块中- import 'react-telephone-input/css/default.css' IMP ：从3. *开始，默认情况下将不包含样式。 可以使用require('react-telephone-input/lib/withStyles')来获取样式。 从令人敬畏的jQuery插件的启发中得到启发。 这是作为组件编写的。 现场演示-http: function handleInputChange ( telNumber , selectedCountry ) { console . log ( 'input changed. number: ' , telNumber , 'selected count
ReactNative中验证手机号和密码
WindFlyCloud的博客
04-10 2899
/** * 验证是否为手机号 * @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中验证码输入框的使用—react-native-confirmation-code-field
AnitaSun的博客
03-28 961
地址：https://www.npmjs.com/package/react-native-confirmation-code-field 下载：npm install --save react-native-confirmation-code-field 代码： import React, {Component} from 'react'; import {SafeAreaView, Text, StyleSheet} from 'react-native'; import { CodeFi.
实现手机号码中间4位用星号（*）替换显示
热门推荐
wang544831183的博客
09-11 2万+
//Method 1： function hidtel($phone){     $IsWhat = preg_match('/(0[0-9]{2,3}[\-]?[2-9][0-9]{6,7}[\-]?[0-9]?)/i',$phone); //固定电话     if($IsWhat == 1){         return preg_rep
react-native动态验证码
06-28 1767
react-native-verification-code react-native随机验证码 主要依赖库 react-native-linear-gradient具体原生相关操作请参考以上网址. start npm install react-native-verification-code import VerificationCode from 'react-native-veri...
React 项目 通过手机号实现登录
qq_48455736的博客
06-15 734
React 项目 通过手机号实现登录
React-Native解决键盘弹出遮挡输入框的策略
"在开发React Native应用时，经常会遇到一个问题：当用户在输入框中输入时，软键盘弹出会遮挡到输入框，影响用户体验。本文将介绍如何解决这个问题，确保用户在输入时，输入框始终保持可见。 首先，我们需要引入`...
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值