2017-08-02 15:34:15 mengks1987 阅读数 3612
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57472 人正在学习 去看看 李宁

获取验证码控件:https://github.com/781238222/react-native-verify-code

如果帮到你了请点个赞

2019-06-28 21:46:25 rx_lj 阅读数 359
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57472 人正在学习 去看看 李宁

react-native-verification-code

react-native随机验证码
主要依赖库 react-native-linear-gradient具体原生相关操作请参考以上网址.

start

npm install react-native-verification-code

import VerificationCode from 'react-native-verification-code';

react-native-verfication-code api

属性 描述 参数类型 默认值
containerStyle 容器样式 Object
textStyle 验证码文本样式 Object
codeLength 验证码长度 Number 4
mode 模式默认字母,支持letter,number两种 String letter
isColor 是否开启验证码随机字体颜色 Boolean false
isBgColor 是否开启容器背景随机颜色 Boolean false
time 响应时间内多次点击无效 Number 200
onClick 点击事件 Function

example截图

在这里插入图片描述

2017-05-15 21:55:50 xinganbu124 阅读数 1241
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57472 人正在学习 去看看 李宁

React Native实现验证码倒计时功能

实现倒计时功能使用的是核心方法 setInterval,setInterval() 方法会不停地调用函数,直到 clearInterval() 被调用或窗口被关闭。

startCountDown() {
    this.interval = setInterval(() => {
       this.setState({
           countdown: this.getCountdown() - 1
       });
    },1000);
}

当 App 切换至后台之后,setInterval 将不会执行,而当 App 从后台切换至前台时,setInterval 将继续执行,所以对于切换至后台的情况需要监听 App 状态,记录变化的时间。React Native 提供了 AppState 监听 App 状态改变,AppState 一共有三种状态,包括以下三种。

  • active - 应用正在前台运行
  • background - 应用正在后台运行。用户既可能在别的应用中,也可能在桌面
  • inactive - 这是一个过渡状态,不会在正常的 React Native 应用中出现
componentDidMount() {
    AppState.addEventListener('change', this._handleAppStateChange);
}

componentWillUnmount() {
    AppState.removeEventListener('change', this._handleAppStateChange);
    this.interval && clearInterval(this.interval);
  }

 _handleAppStateChange = (nextAppState) => {
    if (this.state.appState === 'active' && nextAppState.match(/inactive|background/)) {
          this.backgroundTime = new Date().getTime() / 1000;
    }
    if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
          this.backgroundTime = utils.fomatFloat(new Date().getTime() / 1000 - this.backgroundTime,0);
     }
     this.setState({appState: nextAppState});
 }

最后完整实现代码

import React, {
    PureComponent,
} from 'react';
import {
    TouchableOpacity,
    Text,
    AppState,
    StyleSheet
} from 'react-native';

function fomatFloat(src, pos) {
    return Math.round(src * Math.pow(10, pos)) / Math.pow(10, pos);
}

class CountDown extends PureComponent {

    constructor(props) {
        super(props);
        this.state = {
            appState: AppState.currentState,
            countdown: -1,
            disabled: false
        };
        this.backgroundTime = 0;
    }

    componentDidMount() {
        AppState.addEventListener('change', this._handleAppStateChange);
    }

    componentWillUnmount() {
        AppState.removeEventListener('change', this._handleAppStateChange);
        this.interval && clearInterval(this.interval);
    }

    _handleAppStateChange = (nextAppState) => {
        if (this.state.appState === 'active' && nextAppState.match(/inactive|background/)) {
            this.backgroundTime = new Date().getTime() / 1000;
        }
        if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
            this.backgroundTime = fomatFloat(new Date().getTime() / 1000 - this.backgroundTime,0);
        }
        this.setState({appState: nextAppState});
    }

    setCountdown(countdown) {
        this.setState({
           countdown: countdown
        });
    }

    getCountdown() {
        return this.state.countdown;
    }

    startCountDown() {
        this.interval = setInterval(() => {
            if (this.backgroundTime < this.getCountdown()) {
                this.setState({
                    countdown: this.getCountdown() - this.backgroundTime - 1
                },()=>{
                    this.backgroundTime = 0;
                    if (this.getCountdown() < 0) {
                        this.interval && clearInterval(this.interval);
                    }
                    if (this.getCountdown() >= 0) {
                        this.setButtonClickDisable(true);
                    } else {
                        this.setButtonClickDisable(false);
                    }
                });
            } else {
                this.setCountdown(-1);
                this.setButtonClickDisable(false);
                this.interval && clearInterval(this.interval);
            }
        }, 1000);
        this.setButtonClickDisable(true);
    }

    setButtonClickDisable(enable) {
        this.setState({
           disabled: enable
        });
    }

    onPress = () => {
        this.setCountdown(120);
        this.startCountDown();
    }

    render() {
        return (
            <TouchableOpacity disabled={this.state.disabled} onPress={this.onPress} style={styles.vcode}>
                {this.state.countdown >= 0 ?
                    <Text style={styles.vcodeText}>
                        {`${this.state.countdown}`}秒
                    </Text> :
                    <Text style={styles.vcodeText}>
                        获取验证码
                    </Text>
                }
            </TouchableOpacity>
        );

    }
}
const styles = StyleSheet.create({
    vcode: {
        borderRadius: 5,
        borderColor: '#ccc',
        borderWidth: 1,
        height:40,
        justifyContent: 'center',
        backgroundColor:'white',
        alignItems: 'center',
        marginLeft: 5
    },
    vcodeText: {
        color: 'rgba(255,165,0,1.0)',
    }
});

export default CountDown;
2019-03-03 18:48:17 shizhihua11 阅读数 203
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57472 人正在学习 去看看 李宁
import CountDownButton from 'react-native-smscode-count-down';

//页面渲染
<CountDownButton
   style={styles.codeButton}
   textStyle={{color: '#fff'}}
   timerCount={60}
   timerTitle={'获取验证码'}
   enable={this.state.newPhoneNumber.length > 10}
   timerActiveTitle={['重新获取(','s)']}
   disableColor={"#333"}
   onClick={(shouldStartCounting)=>{
      this.sendCode(shouldStartCounting);//发送验证码调用的方法
   }}
   timerEnd={()=>{
   }}/>

//发送验证码方法
sendCode(shouldStartCounting){
   shouldStartCounting(true);//获取验证码改变状态    
}

 

2019-06-16 15:04:00 weixin_30279315 阅读数 98
  • 完全征服React Native

    React Native是Facebook于2015年推出的跨平台开发工具,可用于开发Android和iOS App,并且同时具有混合开发的优点(热更新,跨平台)以及本地App的性能。 本课程采用新的ES6开发,主要内容包括ReactNative的基础知识,ReactNative的布局,组件,API,封装本地API和组件,发布ReactNative App,本地与ReactNative深度结合

    57472 人正在学习 去看看 李宁

 React Native 获取验证码 按钮

 

效果如图:

 

 

实现方法:

一、获取验证码 按钮组件 封装

CountDownButton.js
"use strict";

import React from 'react';
import PropTypes from 'prop-types';

import {
    View,
    Text,
    TouchableOpacity,
    ViewPropTypes, StyleSheet
} from 'react-native';

const defaultShowText = '获取验证码';
export default class CountDownButton extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            timerCount: this.props.timerCount || 60,
            timerTitle: this.props.timerTitle || defaultShowText,
            counting: false,
            selfEnable: true,
        };
        this._shouldStartCount = this._shouldStartCount.bind(this);
        this._countDownAction = this._countDownAction.bind(this);
    }

    static propTypes = {
        style: ViewPropTypes.style,
        textStyle: Text.propTypes.style,
        onClick: PropTypes.func,
        disableColor: PropTypes.string,
        timerTitle: PropTypes.string,
        enable: PropTypes.oneOfType([PropTypes.bool, PropTypes.number]),
        timerEnd: PropTypes.func,
        timerActiveTitle: PropTypes.array,
        executeFunc: PropTypes.func
    };

    _countDownAction() {
        const codeTime = this.state.timerCount;
        const {timerActiveTitle, timerTitle} = this.props;
        const now = Date.now();
        const overTimeStamp = now + codeTime * 1000 + 100;
        /*过期时间戳(毫秒) +100 毫秒容错*/
        this.interval = setInterval(() => {
            const nowStamp = Date.now();
            if (nowStamp >= overTimeStamp) {
                this.interval && clearInterval(this.interval);
                this.setState({
                    timerCount: codeTime,
                    timerTitle: timerTitle || defaultShowText,
                    counting: false,
                    selfEnable: true
                });
                if (this.props.timerEnd) {
                    this.props.timerEnd()
                }
            } else {
                const leftTime = parseInt((overTimeStamp - nowStamp) / 1000, 10);
                let activeTitle = `重新获取(${leftTime}s)`;
                if (timerActiveTitle) {
                    if (timerActiveTitle.length > 1) {
                        activeTitle = timerActiveTitle[0] + leftTime + timerActiveTitle[1]
                    } else if (timerActiveTitle.length > 0) {
                        activeTitle = timerActiveTitle[0] + leftTime
                    }
                }
                this.setState({
                    timerCount: leftTime,
                    timerTitle: activeTitle,
                })
            }
        }, 1000)
    }

    _shouldStartCount(shouldStart) {
        if (this.state.counting) {
            return
        }
        if (shouldStart) {
            this._countDownAction();
            this.setState({counting: true, selfEnable: false})
        } else {
            this.setState({selfEnable: true})
        }
    }

    componentDidMount() {
        const {executeFunc} = this.props;
        executeFunc && executeFunc(this._shouldStartCount);
    }

    componentWillUnmount() {
        clearInterval(this.interval)
    }

    render() {
        const {onClick, style, textStyle, enable, disableColor} = this.props;
        const {counting, timerTitle, selfEnable} = this.state;
        return (
            <View style={[{width: 90, height: 34}, style]}>
                <TouchableOpacity
                    activeOpacity={counting ? 1 : 0.8}
                    onPress={() => {
                        if (!counting && enable && selfEnable) {

                            this.setState({selfEnable: false});
                            onClick(this._shouldStartCount)
                        }
                    }}
                    style={[styles.container,
                        {backgroundColor: ((!counting && enable && selfEnable) ? 'red' : disableColor || '#ccc')}
                    ]}
                >
                    <Text
                        style={[
                            styles.defaultText,
                            textStyle,
                        ]}>{timerTitle}</Text>
                </TouchableOpacity>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        borderWidth: 0.5,
        borderRadius: 5,
        borderColor: "white",
    },
    defaultText: {
        fontSize: 14,
        color: "white",
    }
});

 

使用:

import React, {Component} from "react";
import {StyleSheet, View,} from 'react-native';
import CountDownButton from './CountDownButton';

export default class TestButton extends Component {
    constructor(props) {
        super(props);
        this.state = {}
    }

    render() {

        return (
            <View style={{flex: 1}}>

                <CountDownButton enable={true}
                                 timerCount={10}
                                 onClick={(_shouldStartCount) => {
                                     _shouldStartCount(true)
                                 }}/>

            </View>
        );

    }
}

 

本博客地址: wukong1688

本文原文地址:https://www.cnblogs.com/wukong1688/p/11031600.html

转载请著名出处!谢谢~~

 

转载于:https://www.cnblogs.com/wukong1688/p/11031600.html

没有更多推荐了,返回首页