Skip to content

Commit bcee344

Browse files
ljunbljunb
committed
Add NetInfo handle.
1 parent c30252b commit bcee344

3 files changed

Lines changed: 280 additions & 247 deletions

File tree

‎README.md‎

Lines changed: 104 additions & 99 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
[![npm](https://img.shields.io/npm/dm/rn-countdown.svg)](https://www.npmjs.com/package/rn-countdown)
55
[![npm](https://img.shields.io/npm/l/rn-countdown.svg)](https://github.com/ljunb/rn-countdown/blob/master/LICENSE)
66

7-
A countdown component for react-native APPs. When the AppState changes to `inactive`, the timer is cleared and the new timer is turned on when the state changes back to `active`. You should use this component to request a verification code that supports custom styles for different status.
7+
A countdown component for react-native APPs. You should use this component to request a verification code that supports custom styles for different status.
88

99
## Preview
1010
![demo](https://github.com/ljunb/screenshots/blob/master/rn-countdown.gif)
@@ -25,111 +25,114 @@ yarn add rn-countdown
2525
```js
2626
import React, {Component} from 'react';
2727
import {
28-
StyleSheet,
29-
View,
30-
Button,
31-
TextInput,
32-
Text,
33-
Dimensions
28+
StyleSheet,
29+
View,
30+
Button,
31+
TextInput,
32+
Text,
33+
Dimensions
3434
} from 'react-native';
3535
import CountdownView from 'rn-countdown';
3636

3737
export default class RNCountdownDemo extends Component {
3838

39-
state = {
40-
hasText: false
41-
};
42-
phoneNumber = '';
43-
44-
shouldHandleBeforeCountdown = () => {
45-
if (this.phoneNumber) return true;
46-
47-
alert('电话号码不能为空!');
48-
return false;
49-
};
50-
51-
handleStopCountdown = () => {
52-
this.countdown && this.countdown.stopCountdown();
53-
};
54-
55-
handleChangeText = text => {
56-
this.phoneNumber = text;
57-
this.setState({hasText: !!this.phoneNumber})
58-
};
59-
60-
render() {
61-
const style = this.state.hasText ? {backgroundColor: 'rgb(59, 197, 81)', borderWidth: 0} : {};
62-
const title = this.state.hasText ? {color: '#fff'} : {};
63-
64-
return (
65-
<View style={styles.container}>
66-
<View style={styles.phoneCell}>
67-
<View style={styles.phoneInfo}>
68-
<Text>账号:</Text>
69-
<TextInput
70-
style={styles.input}
71-
placeholder="请输入手机号码"
72-
underlineColorAndroid="transparent"
73-
onChangeText={this.handleChangeText}
74-
/>
75-
</View>
76-
<CountdownView
77-
ref={r => this.countdown = r}
78-
time={10}
79-
title="发送验证码"
80-
overTitle="重新发送"
81-
style={[styles.countdown, style]}
82-
titleStyle={[styles.countdownTitle, title]}
83-
countingTitleTemplate="发送中({time})"
84-
countingStyle={styles.countingdown}
85-
countingTitleStyle={styles.countingTitle}
86-
shouldHandleBeforeCountdown={this.shouldHandleBeforeCountdown}
87-
/>
88-
</View>
89-
<Button title="停止" onPress={this.handleStopCountdown}/>
90-
</View>
91-
);
92-
}
39+
state = {
40+
hasText: false
41+
};
42+
phoneNumber = '';
43+
44+
shouldStartCountdown = () => {
45+
if (this.phoneNumber) return true;
46+
47+
alert('电话号码不能为空!');
48+
return false;
49+
};
50+
51+
handleNetworkFailed = () => alert('network failed');
52+
53+
handleStopCountdown = () => {
54+
this.countdown && this.countdown.stopCountdown();
55+
};
56+
57+
handleChangeText = text => {
58+
this.phoneNumber = text;
59+
this.setState({hasText: !!this.phoneNumber})
60+
};
61+
62+
render() {
63+
const style = this.state.hasText ? {backgroundColor: 'rgb(59, 197, 81)', borderWidth: 0} : {};
64+
const title = this.state.hasText ? {color: '#fff'} : {};
65+
66+
return (
67+
<View style={styles.container}>
68+
<View style={styles.phoneCell}>
69+
<View style={styles.phoneInfo}>
70+
<Text>账号:</Text>
71+
<TextInput
72+
style={styles.input}
73+
placeholder="请输入手机号码"
74+
underlineColorAndroid="transparent"
75+
onChangeText={this.handleChangeText}
76+
/>
77+
</View>
78+
<CountdownView
79+
ref={r => this.countdown = r}
80+
time={10}
81+
title="发送验证码"
82+
overTitle="重新发送"
83+
style={[styles.countdown, style]}
84+
titleStyle={[styles.countdownTitle, title]}
85+
countingTitleTemplate="发送中({time})"
86+
countingStyle={styles.countingdown}
87+
countingTitleStyle={styles.countingTitle}
88+
shouldStartCountdown={this.shouldStartCountdown}
89+
onNetworkFailed={this.handleNetworkFailed}
90+
/>
91+
</View>
92+
<Button title="停止" onPress={this.handleStopCountdown}/>
93+
</View>
94+
);
95+
}
9396
}
9497

9598
const styles = StyleSheet.create({
96-
container: {
97-
flex: 1,
98-
justifyContent: 'center',
99-
alignItems: 'center',
100-
backgroundColor: '#F5FCFF',
101-
},
102-
phoneCell: {
103-
flexDirection: 'row',
104-
alignItems: 'center',
105-
justifyContent: 'space-between',
106-
paddingHorizontal: 15,
107-
height: 40,
108-
borderBottomWidth: StyleSheet.hairlineWidth,
109-
borderColor: '#ebebeb',
110-
width: Dimensions.get('window').width,
111-
backgroundColor: '#fff'
112-
},
113-
phoneInfo: {
114-
flexDirection: 'row',
115-
alignItems: 'center',
116-
},
117-
input: {
118-
height: 30,
119-
width: Dimensions.get('window').width * 0.4,
120-
marginLeft: 10,
121-
padding: 0,
122-
fontSize: 14
123-
},
124-
countdown: {
125-
borderRadius: 15,
126-
},
127-
countingdown: {
128-
backgroundColor: 'transparent',
129-
borderWidth: StyleSheet.hairlineWidth
130-
},
131-
countdownTitle: {color: '#ccc'},
132-
countingTitle: {color: '#ccc'}
99+
container: {
100+
flex: 1,
101+
justifyContent: 'center',
102+
alignItems: 'center',
103+
backgroundColor: '#F5FCFF',
104+
},
105+
phoneCell: {
106+
flexDirection: 'row',
107+
alignItems: 'center',
108+
justifyContent: 'space-between',
109+
paddingHorizontal: 15,
110+
height: 40,
111+
borderBottomWidth: StyleSheet.hairlineWidth,
112+
borderColor: '#ebebeb',
113+
width: Dimensions.get('window').width,
114+
backgroundColor: '#fff'
115+
},
116+
phoneInfo: {
117+
flexDirection: 'row',
118+
alignItems: 'center',
119+
},
120+
input: {
121+
height: 30,
122+
width: Dimensions.get('window').width * 0.4,
123+
marginLeft: 10,
124+
padding: 0,
125+
fontSize: 14
126+
},
127+
countdown: {
128+
borderRadius: 15,
129+
},
130+
countingdown: {
131+
backgroundColor: 'transparent',
132+
borderWidth: StyleSheet.hairlineWidth
133+
},
134+
countdownTitle: {color: '#ccc'},
135+
countingTitle: {color: '#ccc'}
133136
});
134137
```
135138

@@ -145,7 +148,9 @@ titleStyle | object | Yes | none | font style of countdo
145148
countingStyle | ViewPropTypes | Yes | none | custom style when counting down
146149
countingTitleTemplate | string | Yes | {time}s后重新获取 | counting down title, must conform to the format that contain `{time}`
147150
countingTitleStyle | object | Yes | none | custom title style when counting down
148-
shouldHandleBeforeCountdown | function | Yes | return true | before start countdown, you can use this function to handle some business logic, return true to allow countdown, otherwise return false
151+
shouldStartCountdown | function | Yes | return true | before start countdown, you can use this function to handle some business logic, return true to allow countdown, otherwise return false
152+
onNetworkFailed | function | Yes | none | invoke when the network is failed, so the countdown timer will be invalid in this situation, maybe you will use it to show some message for users
153+
149154

150155
## Methods
151156
Method | Description

0 commit comments

Comments
 (0)