rn 0.55 react-native-sk-countdown 更换倒计时插件解决报错
由于 react-native-sk-countdown 0.33以上已经不支持,所以报错
老师提出的解决方案为:
http://coding.imooc.com/learn/questiondetail/2063.html
虽然解决 但是 如果 node_modules 删了或者团队开发 还需要 react-native-sk-countdown 进入插件包进行修改. 所以这边我另找了个组件:
https://github.com/ljunb/rn-countdown 具体操作查看他文档就好,逻辑上和老师的有些不同,这里我把源码贴出方便对比
'use strict'
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, {Component} from 'react'
import Button from 'react-native-button'
import CountdownView from 'rn-countdown';
import request from '../common/request'
import config from '../common/config'
import {
StyleSheet,
Text,
Platform,
View,
TextInput,
Dimensions,
Alert,
AsyncStorage,
AlertIOS
} from 'react-native'
const {width} = Dimensions.get('window')
export default class Login extends React.Component {
constructor (props) {
super(props)
this.state = {
pop: null,
verifyCode: '',
phoneNumber: '',
countingDone: false,
codeSent: false
}
}
//发送显示
_showVerifyCode () {
//发送成功 倒计时开始
this.countdown.startCountdown();
this.setState({
codeSent: true
})
}
_countingDone () {
this.setState({
countingDone: true
})
}
_sendVerifyCode () {
let that = this
const phoneNumber = this.state.phoneNumber
if (!phoneNumber) {
AlertIOS.alert('手机号不能为空！')
}
let body = {
phoneNumber: phoneNumber
}
const signupURL = config.api.base + config.api.signup
request.post(signupURL, body)
.then((data) => {
if (data && data.success) {
//发送成功
that._showVerifyCode()
} else {
AlertIOS.alert('获取验证码失败，请检查手机号是否正确')
}
})
.catch((err) => {
//为了方便看倒计时效果 接口能跑通时候 记得注释掉
that._showVerifyCode()
AlertIOS.alert('获取验证码失败，请检查网络是否良好')
})
return false;
}
_submit () {
let that = this
const phoneNumber = this.state.phoneNumber
const verifyCode = this.state.verifyCode
if (!phoneNumber || !verifyCode) {
return AlertIOS.alert('手机号或验证码不能为空！')
}
let body = {
phoneNumber: phoneNumber,
verifyCode: verifyCode
}
const verifyURL = config.api.base + config.api.verify
request.post(verifyURL, body)
.then((data) => {
if (data && data.success) {
that.props.afterLogin(data.data)
} else {
AlertIOS.alert('获取验证码失败，请检查手机号是否正确')
}
})
.catch((err) => {
AlertIOS.alert('获取验证码失败，请检查网络是否良好')
})
}
render () {
const style = this.state.hasText ? {backgroundColor: 'rgb(59, 197, 81)', borderWidth: 0} : {};
const title = this.state.hasText ? {color: '#fff'} : {};
return (
<View style={styles.container}>
<View style={styles.signupBox}>
<Text style={styles.title}>快速登录</Text>
<TextInput
placeholder='输入手机号'
autoCaptialize={'none'} //不区分大小写
autoCorrect={false} //不去区分对与错
keyboardType={'number-pad'} //数字键盘
style={styles.inputField}
underlineColorAndroid='transparent'
//获取当前文本修改的值
onChangeText={(text) => {
this.setState({
phoneNumber: text
})
}}
/>
{
<View style={styles.verifyCodeBox}>
<TextInput
placeholder='输入验证码'
underlineColorAndroid='transparent'
autoCaptialize={'none'}
autoCorrect={false}
keyboardType={'number-pad'}
style={[styles.inputField, styles.verifyField]}
onChangeText={(text) => {
this.setState({
verifyCode: text
})
}}
/>
<CountdownView
ref={r => this.countdown = r}
time={60}
title="发送验证码"
overTitle="重新发送"
style={[styles.countBtn, style]}
titleStyle={[styles.countdownTitle, title]}
countingTitleTemplate="发送中:{time}"
countingStyle={styles.countingdown}
countingTitleStyle={styles.countingTitle}
shouldStartCountdown={this._sendVerifyCode.bind(this)}
/>
</View>
}
{
this.state.codeSent
? <Button
style={styles.btn}
onPress={this._submit.bind(this)}>登录</Button>
: null
}
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
padding: 10,
backgroundColor: '#f9f9f9'
},
signupBox: {
marginTop: 30
},
title: {
marginBottom: 20,
color: '#333',
fontSize: 20,
textAlign: 'center'
},
inputField: {
height: 40,
padding: 5,
color: '#666',
fontSize: 16,
backgroundColor: '#fff',
borderRadius: 4
},
verifyField: {
width: width - 140
},
verifyCodeBox: {
marginTop: 10,
flexDirection: 'row',
justifyContent: 'space-between'
},
countBtn: {
width: 110,
height: 40,
padding: 10,
marginLeft: 8,
backgroundColor: '#ee735c',
borderColor: '#ee735c',
borderRadius: 2
},
countingdown: {
backgroundColor: 'transparent',
borderWidth: StyleSheet.hairlineWidth
},
countdownTitle: {color: '#ccc'},
countingTitle: {color: '#ccc'},
btn: {
marginTop: 10,
padding: 10,
backgroundColor: 'transparent',
borderColor: '#ee735c',
borderWidth: 1,
...Platform.select({
ios: {
borderRadius: 4,
},
android: {
borderRadius: 0
}
}),
color: '#ee735c'
}
})
正在回答 回答被采纳积分+3
1回答
相似问题
登录后可查看更多问答，登录/注册
