react-native-countdown
A component for react-native
Add it to your project
Run npm install rc-react-native-countdown --save
// Within your render function. Count down after press it.<CountDown onPress=thissendAgain //default null text='Try again' //default '' time=60 //default 60 buttonStyle=padding:20 textStyle=color:'black' //default black disabledTextStyle=color:'gray' //default gray/>
TODOS
- Add custom style
this is a simple demo
static defaultProps = {
isChecked: false
};
static propTypes = {
isChecked: React.PropTypes.bool
};
constructor(props) {
super(props);
this.state = {
isChecked: props.isChecked
}
}
renderCountDown(){
if (this.state.isChecked) {
return(
<CountDown
onPress={this.sendAgain.bind(this)} //default null
text={'重新获取'} //default ''
time={60} //default 60
buttonStyle={{padding:20}}
textStyle={{color:'black'}} //default black
disabledTextStyle={{color:'gray'}} //default gray
/>)
}
else{
return(
<Text style ={styles.tip} onPress={this.sendCode.bind(this)}>获取验证码</Text>
)
}
}
sendAgain(){
}
sendCode(){
this.setState({ isChecked: !this.state.isChecked });
}
render(){
return (
<View style={styles.container}>
<Text style={styles.tip}>{'CountDown in timestamp \n 以日期-时间为单位的倒计时'}</Text>
<View style={styles.row}>
{this.renderCountDown()}
</View>
</View>
)
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'space-around',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
row: {
padding: 7,
backgroundColor: 'red',
borderRadius: 7,
},
tip: {
fontSize: 20,
},
cd: {
textAlign: 'center',
color: 'white',
fontSize: 20,
},
});