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

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 (<KeyboardAvoidingViewbehavior={IOS ? "padding" : null}style={styles.container}><StatusBaranimated={true}//是否动画hidden={false}//是否隐藏backgroundColor={'#000'}//android 设置状态栏背景颜色translucent={false}//android 设置状态栏是否为透明showHideTransition="fade"//IOS状态栏改变时动画 fade:默认 slidenetworkActivityIndicatorVisible={this.state.isLoading}//IOS设定网络活动指示器(就是那个菊花)是否显示在状态栏。statusBarStyle={"default"}//状态栏样式 default    默认（IOS为白底黑字、Android为黑底白字）barStyle={"default"}// 状态栏文本的颜色。/><Nav title={"更换手机号"} leftClick={() => { goBack() }} /><ScrollViewkeyboardShouldPersistTaps={"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><TextInputref={"_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/sendplaceholderTextColor="#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>:<CountDownButtonstyle={{ 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()}}><LinearGradientstart={{ 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')} /><TextInputkey={"phone"}style={styles.input}returnKeyType={"done"}// 键盘确定按钮类型 done/go/next/search/sendplaceholderTextColor="#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')} /><TextInputkey={"code"}style={styles.input}returnKeyType={"done"}// 键盘确定按钮类型 done/go/next/search/sendplaceholderTextColor="#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()}}/>{/* 更新倒计时 */}<CountDownButtonstyle={[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()}}}><LinearGradientstart={{ 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',},
});

react native 更换手机号验证码输入框相关推荐

android 倒计时封装,react native中的聊天气泡及timer封装成的发送验证码倒计时
其实,今天我想把我近期遇到的坑都总结一下: 1.goBack的跨页面跳转,又两种方法,一可以像兔哥那样修改navigation源码,二可以用navigationActions 2.父子组件的传值,一可 ...
H5、React Native、Native应用对比分析
@王利华,vczero "存在即合理".凡是存在的,都是合乎规律的.任何新事物的产生总要的它的道理:任何新事物的发展总是有着取代旧事物的能力.React Native来的正是时候, ...
uniapp 实现验证码输入框
前言在实现页面的时候验证码输入的场景是比较常见的,如果使用一些前端 UI 组件会有这样的组件,可一些情况下需要自己去实现.比如小程序,如果过多依赖组件库,在一个小程序中仅使用一个组件库还好,引用组件 ...
关于React native Demo项目的总结
简述至于项目都是学习其他人的实战项目,这里不过是做一个学习总结,主要是记录下使用到的包和一些UI工具,以便于参考. react-navigation 页面跳转和转场动画 react-native-s ...
3、React Native实战——实现QQ的登录界面
今天记录的是使用React Native实现QQ的登录界面,如果不了解React Native,请看React Native中文网站:http://reactnative.cn/ 下面是一张手机QQ的 ...
【React Native开发】React Native控件之TextInput组件讲解与QQ登录界面实现(11)
转载请标明出处: http://blog.csdn.net/developer_jiangqq/article/details/50589570 本文出自:[江清清的博客] (一)前言 [好消息]个人 ...
Android特效（包含React Native）
在这里提供了一些Android特效,大家可以参考一下, 带有删除按钮的dialog https://www.jianshu.com/p/9259ad7f857bToast封装 https://www. ...
react native 开发笔记（一）
1.准备工作: (1)安装node.js程序 (2)安装android-studio程序(项目第一次加载需要 androidSDK) (3)java环境的配置(百度) (4)需要一个安卓程序模拟器,我 ...
React Native封装Toast与加载Loading组件
React Native开发封装Toast与加载Loading组件在App开发中,我们避免不了使用的两个组件,一个Toast,一个网络加载Loading,在RN开发中,也是一样,React Nati ...

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

react native 更换手机号验证码输入框相关推荐

最新文章

热门文章

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

react native 更换手机号 验证码输入框相关推荐

最新文章

热门文章

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

react native 更换手机号验证码输入框相关推荐