Skip to content

Commit a9c679d

Browse files
cyqresigcyqresig
committed
updated usage and preview
1 parent c75372d commit a9c679d

File tree

1 file changed

+178
-114
lines changed

1 file changed

+178
-114
lines changed

‎README.md‎

Lines changed: 178 additions & 114 deletions
Original file line numberDiff line numberDiff line change
@@ -26,118 +26,182 @@ If you need use badge button, Install the badge from npm with `npm install react
2626
Then, require it from your app's JavaScript files with `import Badge from 'react-native-smart-badge'`.
2727

2828
```js
29-
import React, {Component} from 'react'
30-
import {
31-
ScrollView,
32-
View,
33-
StyleSheet,
34-
Image,
35-
Text,
36-
} from 'react-native'
37-
38-
import Button from 'react-native-smart-button'
39-
import image_liking from '../images/liking.png'
40-
import Badge from 'react-native-smart-badge'
41-
42-
export default class AllButton extends Component {
43-
44-
render() {
45-
return (
46-
<ScrollView style={{flex: 1, marginTop: 20 + 44, }}>
47-
48-
<Button
49-
disabled={true}
50-
style={{margin: 10, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
51-
textStyle={{fontSize: 17, color: 'white'}}
52-
disabledStyle={{backgroundColor: '#DDDDDD', borderWidth: 0,}}
53-
disabledTextStyle={{color: '#BCBCBC'}}
54-
>
55-
disabled (按钮禁用)
56-
</Button>
57-
58-
<Button
59-
style={{margin: 10, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
60-
textStyle={{fontSize: 17, color: 'white'}}
61-
>
62-
opacity all (按钮透明)
63-
</Button>
64-
65-
<Button
66-
touchableType={'opacityContent'}
67-
style={{margin: 10, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
68-
textStyle={{fontSize: 17, color: 'white'}}
69-
>
70-
opacity content (内容透明)
71-
</Button>
72-
73-
<Button
74-
touchableType={'highlight'}
75-
underlayColor={'#C90000'}
76-
style={{margin: 10, justifyContent: 'center', height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
77-
textStyle={{fontSize: 17, color: 'white'}}
78-
>
79-
highlight (背景高亮)
80-
</Button>
81-
82-
<Button
83-
touchableType={'blur'}
84-
style={{margin: 10, justifyContent: 'center', height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
85-
textStyle={{fontSize: 17, color: 'white'}}
86-
87-
>
88-
blur for ios (模糊阴影)
89-
</Button>
90-
91-
<Button
92-
touchableType={'opacity'}
93-
style={{margin: 10, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
94-
textStyle={{fontSize: 17, color: 'white'}}
95-
>
96-
<Image source={image_liking} style={{width: 40, height: 40, marginRight: 3, }}/>
97-
icon1
98-
</Button>
99-
100-
<Button
101-
touchableType={'opacityContent'}
102-
style={{margin: 10, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
103-
textStyle={{fontSize: 17, color: 'white'}}
104-
>
105-
<Image source={image_liking} style={{width: 40, height: 40, marginRight: 3, }}/>
106-
icon2
107-
</Button>
108-
109-
<Button
110-
touchableType={'highlight'}
111-
underlayColor={'#C90000'}
112-
style={{margin: 10, justifyContent: 'center', height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
113-
textStyle={{fontSize: 17, color: 'white'}}
114-
>
115-
badge1
116-
<Badge
117-
style={{ backgroundColor: '#00AAEF', marginLeft: 6, }}
118-
textStyle={{ color: '#fff', fontSize: 12, }}>
119-
8
120-
</Badge>
121-
</Button>
122-
123-
<Button
124-
touchableType={'blur'}
125-
style={{margin: 10, justifyContent: 'center', height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
126-
textStyle={{fontSize: 17, color: 'white'}}
127-
>
128-
badge2
129-
<Badge
130-
style={{ backgroundColor: '#00AAEF', marginLeft: 6, }}
131-
textStyle={{ color: '#fff', fontSize: 12, }}>
132-
18
133-
</Badge>
134-
</Button>
135-
136-
</ScrollView>
137-
)
138-
}
139-
140-
}
29+
import React, {Component} from 'react'
30+
import {
31+
ScrollView,
32+
View,
33+
StyleSheet,
34+
Image,
35+
Text,
36+
ActivityIndicator,
37+
ActivityIndicatorIOS,
38+
ProgressBarAndroid,
39+
Platform,
40+
} from 'react-native'
41+
42+
import Button from 'react-native-smart-button'
43+
import image_liking from '../images/liking.png'
44+
import Badge from 'react-native-smart-badge'
45+
46+
export default class AllButton extends Component {
47+
48+
// 构造
49+
constructor (props) {
50+
super(props);
51+
// 初始状态
52+
this.state = {
53+
btn_1_isLoading: false,
54+
btn_2_isLoading: false,
55+
};
56+
}
57+
58+
render () {
59+
return (
60+
<ScrollView style={{flex: 1, marginTop: 20 + 44, }}>
61+
62+
<Button
63+
disabled={true}
64+
style={{margin: 10, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
65+
textStyle={{fontSize: 17, color: 'white'}}
66+
disabledStyle={{backgroundColor: '#DDDDDD', borderWidth: 0,}}
67+
disabledTextStyle={{color: '#BCBCBC'}}
68+
>
69+
disabled (按钮禁用)
70+
</Button>
71+
72+
<Button
73+
style={{margin: 10, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
74+
textStyle={{fontSize: 17, color: 'white'}}
75+
>
76+
opacity all (按钮透明)
77+
</Button>
78+
79+
<Button
80+
touchableType={'opacityContent'}
81+
style={{margin: 10, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
82+
textStyle={{fontSize: 17, color: 'white'}}
83+
>
84+
opacity content (内容透明)
85+
</Button>
86+
87+
<Button
88+
touchableType={'highlight'}
89+
underlayColor={'#C90000'}
90+
style={{margin: 10, justifyContent: 'center', height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
91+
textStyle={{fontSize: 17, color: 'white'}}
92+
>
93+
highlight (背景高亮)
94+
</Button>
95+
96+
<Button
97+
touchableType={'blur'}
98+
style={{margin: 10, justifyContent: 'center', height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
99+
textStyle={{fontSize: 17, color: 'white'}}
100+
101+
>
102+
blur for ios (模糊阴影)
103+
</Button>
104+
105+
<Button
106+
isLoading={this.state.btn_1_isLoading}
107+
touchableType={'opacity'}
108+
style={{margin: 10, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
109+
textStyle={{fontSize: 17, color: 'white'}}
110+
renderLoadingView={ () => {
111+
return this._renderActivityIndicator()
112+
}}
113+
onPress={ () => {
114+
this.setState({
115+
btn_1_isLoading: true
116+
})
117+
setTimeout( () => {
118+
this.setState({
119+
btn_1_isLoading: false
120+
})
121+
}, 3000)
122+
}}>
123+
loading (加载器)
124+
</Button>
125+
126+
<Button
127+
isLoading={this.state.btn_2_isLoading}
128+
touchableType={'opacityContent'}
129+
style={{margin: 10, height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
130+
textStyle={{fontSize: 17, color: 'white'}}
131+
renderLoadingView={ () => {
132+
return (
133+
<View style={{flexDirection: 'row', alignItems: 'center'}}>
134+
{this._renderActivityIndicator()}
135+
<Text style={{fontSize: 17, color: 'white', fontWeight: 'bold', fontFamily: '.HelveticaNeueInterface-MediumP4',}}>loading</Text>
136+
</View>
137+
)
138+
}}
139+
onPress={ () => {
140+
this.setState({
141+
btn_2_isLoading: true
142+
})
143+
setTimeout( () => {
144+
this.setState({
145+
btn_2_isLoading: false
146+
})
147+
}, 3000)
148+
}}>
149+
loading (加载器+文字)
150+
</Button>
151+
152+
<Button
153+
touchableType={'highlight'}
154+
underlayColor={'#C90000'}
155+
style={{margin: 10, justifyContent: 'center', height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
156+
textStyle={{fontSize: 17, color: 'white'}}
157+
>
158+
<Image source={image_liking} style={{width: 40, height: 40, marginRight: 3, }}/>
159+
icon (图标)
160+
</Button>
161+
162+
<Button
163+
touchableType={'blur'}
164+
style={{margin: 10, justifyContent: 'center', height: 40, backgroundColor: 'red', borderRadius: 3, borderWidth: StyleSheet.hairlineWidth, borderColor: 'red', justifyContent: 'center',}}
165+
textStyle={{fontSize: 17, color: 'white'}}
166+
>
167+
badge (徽章)
168+
<Badge
169+
style={{ backgroundColor: '#00AAEF', marginLeft: 6, }}
170+
textStyle={{ color: '#fff', fontSize: 12, }}>
171+
8
172+
</Badge>
173+
</Button>
174+
175+
</ScrollView>
176+
)
177+
}
178+
179+
_renderActivityIndicator() {
180+
return ActivityIndicator ? (
181+
<ActivityIndicator
182+
style={{margin: 10,}}
183+
animating={true}
184+
color={'#fff'}
185+
size={'small'}/>
186+
) : Platform.OS == 'android' ?
187+
(
188+
<ProgressBarAndroid
189+
style={{margin: 10,}}
190+
color={'#fff'}
191+
styleAttr={'Small'}/>
192+
193+
) : (
194+
<ActivityIndicatorIOS
195+
style={{margin: 10,}}
196+
animating={true}
197+
color={'#fff'}
198+
size={'small'}/>
199+
)
200+
201+
202+
}
203+
204+
}
141205
```
142206

143207
## Props
@@ -162,7 +226,7 @@ shadowColor | color | Yes | '#fff' | see [react-native documents]
162226
[2]: https://facebook.github.io/react-native/docs/style.html
163227
[3]: https://facebook.github.io/react-native/docs/touchablewithoutfeedback.html#props
164228
[4]: https://facebook.github.io/react-native/docs/shadowproptypesios.html
165-
[5]: http://cyqresig.github.io/img/react-native-smart-button-preview-ios-v1.2.1.gif
229+
[5]: http://cyqresig.github.io/img/react-native-smart-button-preview-ios-v1.3.0.gif
166230
[6]: https://github.com/ide/react-native-button
167231
[7]: http://facebook.github.io/react-native/docs/text.html#style
168-
[8]: http://cyqresig.github.io/img/react-native-smart-button-preview-android-v1.2.1.gif
232+
[8]: http://cyqresig.github.io/img/react-native-smart-button-preview-android-v1.3.0.gif

0 commit comments

Comments
 (0)