A smart button for react-native apps, written in JS for cross-platform support. It works on iOS and Android.
This component is compatible with React Native 0.25 and newer.
Inspired by react-native-button
npm install react-native-smart-button --save
Install the package from npm with npm install react-native-smart-button --save.
Then, require it from your app's JavaScript files with import Button from 'react-native-smart-button'.
If you need use badge button, Install the badge from npm with npm install react-native-smart-badge --save.
Then, require it from your app's JavaScript files with import Badge from 'react-native-smart-badge'.
import React, {Component} from 'react'
import {
ScrollView,
View,
StyleSheet,
Image,
Text,
ActivityIndicator,
ActivityIndicatorIOS,
ProgressBarAndroid,
Platform,
} from 'react-native'
import TimerEnhance from 'react-native-smart-timer-enhance'
import Button from 'react-native-smart-button'
import image_liking from '../images/liking.png'
import Badge from 'react-native-smart-badge'
const styles = StyleSheet.create({
buttonStyle: {
margin: 10,
height: 40,
backgroundColor: 'red',
borderRadius: 3,
borderWidth: StyleSheet.hairlineWidth,
borderColor: 'red',
justifyContent: 'center',
},
buttonTextStyle: {
fontSize: 17,
color: 'white'
},
buttonDisabledStyle: {
backgroundColor: '#DDDDDD',
borderWidth: 0,
},
buttonDisabledTextStyle: {
color: '#BCBCBC',
},
});
class AllButton extends Component {
// 构造
constructor (props) {
super(props)
// 初始状态
this.state = {
btn_1_loading: false,
btn_2_loading: false,
btn_3_loading: false,
btn_1_disabled: false,
btn_2_disabled: false,
btn_3_disabled: false,
}
}
render () {
return (
<ScrollView style={{flex: 1, marginTop: 20 + 44, }}>
<Button
disabled={true}
style={styles.buttonStyle}
textStyle={styles.buttonTextStyle}
disabledStyle={styles.buttonDisabledStyle}
disabledTextStyle={styles.buttonDisabledTextStyle}>
disabled (按钮禁用)
</Button>
<Button
style={styles.buttonStyle}
textStyle={styles.buttonTextStyle}>
opacity all (按钮透明)
</Button>
<Button
touchableType={Button.constants.touchableTypes.fadeContent}
style={styles.buttonStyle}
textStyle={styles.buttonTextStyle}>
opacity content (内容透明)
</Button>
<Button
touchableType={Button.constants.touchableTypes.highlight}
underlayColor={'#C90000'}
style={styles.buttonStyle}
textStyle={styles.buttonTextStyle}>
highlight (背景高亮)
</Button>
<Button
touchableType={Button.constants.touchableTypes.blur}
style={styles.buttonStyle}
textStyle={styles.buttonTextStyle}>
blur for ios (模糊阴影)
</Button>
<Button
loading={this.state.btn_1_loading}
disabled={this.state.btn_1_disabled}
touchableType={Button.constants.touchableTypes.fade}
style={styles.buttonStyle}
textStyle={styles.buttonTextStyle}
renderLoadingComponent={this._renderLoadingComponent_1}
onPress={this._handlePress_1}>
loading (加载器)
</Button>
<Button
loading={this.state.btn_2_loading}
disabled={this.state.btn_2_disabled}
touchableType={Button.constants.touchableTypes.fadeContent}
style={styles.buttonStyle}
textStyle={styles.buttonTextStyle}
renderLoadingComponent={this._renderLoadingComponent_2}
onPress={this._handlePress_2}>
loading (加载器+文字)
</Button>
<Button
touchableType={Button.constants.touchableTypes.highlight}
underlayColor={'#C90000'}
style={styles.buttonStyle}
textStyle={styles.buttonTextStyle}>
<Image source={image_liking} style={{width: 40, height: 40, marginRight: 3, }}/>
icon (图标)
</Button>
<Button
touchableType={Button.constants.touchableTypes.blur}
style={styles.buttonStyle}
textStyle={styles.buttonTextStyle}>
badge (徽章)
<Badge
style={{ backgroundColor: '#00AAEF', marginLeft: 6, }}
textStyle={{ color: '#fff', fontSize: 12, }}>
8
</Badge>
</Button>
</ScrollView>
)
}
_handlePress_1 = () => {
this.setState({
btn_1_loading: true,
// btn_1_disabled: true,
})
this.setTimeout(() => {
this.setState({
btn_1_loading: false,
// btn_1_disabled: false
})
}, 3000)
}
_handlePress_2 = () => {
this.setState({
btn_2_loading: true,
// btn_2_disabled: true,
})
this.setTimeout(() => {
this.setState({
btn_2_loading: false,
// btn_2_disabled: false
})
}, 3000)
}
_renderLoadingComponent_1 = () => {
return this._renderActivityIndicator()
}
_renderLoadingComponent_2 = () => {
return (
<View style={{flexDirection: 'row', alignItems: 'center'}}>
{this._renderActivityIndicator()}
<Text style={{
fontSize: 17,
color: 'white',
fontWeight: 'bold',
fontFamily: '.HelveticaNeueInterface-MediumP4',
}}>loading</Text>
</View>
)
}
_renderActivityIndicator() {
return ActivityIndicator ? (
<ActivityIndicator
style={{margin: 10,}}
animating={true}
color={'#fff'}
size={'small'}/>
) : Platform.OS == 'android' ?
(
<ProgressBarAndroid
style={{margin: 10,}}
color={'#fff'}
styleAttr={'Small'}/>
) : (
<ActivityIndicatorIOS
style={{margin: 10,}}
animating={true}
color={'#fff'}
size={'small'}/>
)
}
}
export default TimerEnhance(AllButton)| Prop | Type | Optional | Default | Description |
|---|---|---|---|---|
| touchableType | string | Yes | constants.fade | determines what kind of style of the button should be when touch is active. |
| activeOpacity | number | Yes | 0.2 | see react-native documents |
| underlayColor | color | Yes | see react-native documents | |
| style | style | Yes | see react-native documents | |
| textStyle | style | Yes | see react-native documents | |
| disabledStyle | style | Yes | see react-native documents | |
| disabledTextStyle | style | Yes | see react-native documents | |
| onPressIn | func | Yes | see react-native documents | |
| onPressOut | func | Yes | see react-native documents | |
| onPress | func | Yes | see react-native documents | |
| onLayout | func | Yes | see react-native documents | |
| disabled | bool | Yes | see react-native documents | |
| loading | bool | Yes | false | determines the loading status of the button |
| renderLoadingComponent | func | Yes | determines render function which return the presentation to replaces the content when loading status of the button is true | |
| shadowOpacity | number | Yes | 1 | see react-native documents |
| shadowColor | color | Yes | '#fff' | see react-native documents |