Skip to content

Commit 0ccbb3a

Browse files
cyqresigcyqresig
committed
updated usage
1 parent fdda1cf commit 0ccbb3a

File tree

1 file changed

+49
-45
lines changed

1 file changed

+49
-45
lines changed

‎README.md‎

Lines changed: 49 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -43,20 +43,18 @@ import {
4343
Platform,
4444
} from 'react-native'
4545

46-
import Button from '../../react-native-smart-button'
46+
import TimerEnhance from 'react-native-smart-timer-enhance'
47+
import Button from 'react-native-smart-button'
4748
import image_liking from '../images/liking.png'
48-
import Badge from '../../react-native-smart-badge'
49+
import Badge from 'react-native-smart-badge'
4950

50-
export default class AllButton extends Component {
51+
class AllButton extends Component {
5152

5253
// 构造
5354
constructor (props) {
54-
super(props);
55+
super(props)
5556
// 初始状态
56-
this.state = {
57-
btn_1_isLoading: false,
58-
btn_2_isLoading: false,
59-
};
57+
this.state = {}
6058
}
6159

6260
render () {
@@ -81,15 +79,15 @@ export default class AllButton extends Component {
8179
</Button>
8280

8381
<Button
84-
touchableType={'opacityContent'}
82+
touchableType={Button.constants.touchableTypes.fadeContent}
8583
style={{margin: 10, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
8684
textStyle={{fontSize: 17, color: 'white'}}
8785
>
8886
opacity content (内容透明)
8987
</Button>
9088

9189
<Button
92-
touchableType={'highlight'}
90+
touchableType={Button.constants.touchableTypes.highlight}
9391
underlayColor={'#C90000'}
9492
style={{margin: 10, justifyContent: 'center', height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
9593
textStyle={{fontSize: 17, color: 'white'}}
@@ -98,7 +96,7 @@ export default class AllButton extends Component {
9896
</Button>
9997

10098
<Button
101-
touchableType={'blur'}
99+
touchableType={Button.constants.touchableTypes.blur}
102100
style={{margin: 10, justifyContent: 'center', height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
103101
textStyle={{fontSize: 17, color: 'white'}}
104102

@@ -107,29 +105,31 @@ export default class AllButton extends Component {
107105
</Button>
108106

109107
<Button
110-
isLoading={this.state.btn_1_isLoading}
111-
touchableType={'opacity'}
108+
ref={ component => this._button_1 = component }
109+
touchableType={Button.constants.touchableTypes.fade}
112110
style={{margin: 10, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
113111
textStyle={{fontSize: 17, color: 'white'}}
114112
loadingComponent={
115113
this._renderActivityIndicator()
116114
}
117115
onPress={ () => {
118-
this.setState({
119-
btn_1_isLoading: true
116+
this._button_1.setState({
117+
loading: true,
118+
//disabled: true,
120119
})
121-
setTimeout( () => {
122-
this.setState({
123-
btn_1_isLoading: false
120+
this.setTimeout( () => {
121+
this._button_1.setState({
122+
loading: false,
123+
//disabled: false
124124
})
125125
}, 3000)
126126
}}>
127127
loading (加载器)
128128
</Button>
129129

130130
<Button
131-
isLoading={this.state.btn_2_isLoading}
132-
touchableType={'opacityContent'}
131+
ref={ component => this._button_2 = component }
132+
touchableType={Button.constants.touchableTypes.fadeContent}
133133
style={{margin: 10, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
134134
textStyle={{fontSize: 17, color: 'white'}}
135135
loadingComponent={
@@ -139,20 +139,22 @@ export default class AllButton extends Component {
139139
</View>
140140
}
141141
onPress={ () => {
142-
this.setState({
143-
btn_2_isLoading: true
142+
this._button_2.setState({
143+
loading: true,
144+
//disabled: true,
144145
})
145-
setTimeout( () => {
146-
this.setState({
147-
btn_2_isLoading: false
146+
this.setTimeout( () => {
147+
this._button_2.setState({
148+
loading: false,
149+
//disabled: false
148150
})
149151
}, 3000)
150152
}}>
151153
loading (加载器+文字)
152154
</Button>
153155

154156
<Button
155-
touchableType={'highlight'}
157+
touchableType={Button.constants.touchableTypes.highlight}
156158
underlayColor={'#C90000'}
157159
style={{margin: 10, justifyContent: 'center', height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
158160
textStyle={{fontSize: 17, color: 'white'}}
@@ -162,7 +164,7 @@ export default class AllButton extends Component {
162164
</Button>
163165

164166
<Button
165-
touchableType={'blur'}
167+
touchableType={Button.constants.touchableTypes.blur}
166168
style={{margin: 10, justifyContent: 'center', height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
167169
textStyle={{fontSize: 17, color: 'white'}}
168170
>
@@ -204,28 +206,30 @@ export default class AllButton extends Component {
204206
}
205207

206208
}
209+
210+
export default TimerEnhance(AllButton)
207211
```
208212

209213
## Props
210214

211-
Prop | Type | Optional | Default | Description
212-
---------------- | ------ | -------- | --------- | -----------
213-
touchableType | string | Yes | 'opacity' | determines what kind of style of the button should be when touch is active.
214-
activeOpacity | number | Yes | 0.2 | see [react-native documents][1]
215-
underlayColor | color | Yes | | see [react-native documents][1]
216-
style | style | Yes | | see [react-native documents][2]
217-
textStyle | style | Yes | | see [react-native documents][7]
218-
disabledStyle | style | Yes | | see [react-native documents][2]
219-
disabledTextStyle | style | Yes | | see [react-native documents][7]
220-
onPressIn | func | Yes | | see [react-native documents][3]
221-
onPressOut | func | Yes | | see [react-native documents][3]
222-
onPress | func | Yes | | see [react-native documents][3]
223-
onLayout | func | Yes | | see [react-native documents][3]
224-
disabled | bool | Yes | | see [react-native documents][3]
225-
isLoading | bool | Yes | false | determines the loading status of the button
226-
loadingComponent | element| Yes | | determines the presentation which replaces the content when loading status of the button is true
227-
shadowOpacity | number | Yes | 1 | see [react-native documents][4]
228-
shadowColor | color | Yes | '#fff' | see [react-native documents][4]
215+
Prop | Type | Optional | Default | Description
216+
---------------- | ------ | -------- | -------------- | -----------
217+
touchableType | string | Yes | constants.fade | determines what kind of style of the button should be when touch is active.
218+
activeOpacity | number | Yes | 0.2 | see [react-native documents][1]
219+
underlayColor | color | Yes | | see [react-native documents][1]
220+
style | style | Yes | | see [react-native documents][2]
221+
textStyle | style | Yes | | see [react-native documents][7]
222+
disabledStyle | style | Yes | | see [react-native documents][2]
223+
disabledTextStyle | style | Yes | | see [react-native documents][7]
224+
onPressIn | func | Yes | | see [react-native documents][3]
225+
onPressOut | func | Yes | | see [react-native documents][3]
226+
onPress | func | Yes | | see [react-native documents][3]
227+
onLayout | func | Yes | | see [react-native documents][3]
228+
disabled | bool | Yes | | see [react-native documents][3]
229+
loading | bool | Yes | false | determines the loading status of the button
230+
loadingComponent | element| Yes | | determines the presentation which replaces the content when loading status of the button is true
231+
shadowOpacity | number | Yes | 1 | see [react-native documents][4]
232+
shadowColor | color | Yes | '#fff' | see [react-native documents][4]
229233

230234
[0]: https://github.com/cyqresig/ReactNativeComponentDemos
231235
[1]: https://facebook.github.io/react-native/docs/touchablehighlight.html

0 commit comments

Comments
 (0)