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'.
importReact,{Component}from'react'import{ScrollView,View,StyleSheet,Image,Text,ActivityIndicator,ActivityIndicatorIOS,ProgressBarAndroid,Platform,}from'react-native'importTimerEnhancefrom'react-native-smart-timer-enhance'importButtonfrom'react-native-smart-button'importimage_likingfrom'../images/liking.png'importBadgefrom'react-native-smart-badge'conststyles=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',},});classAllButtonextendsComponent{// 构造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(<ScrollViewstyle={{flex: 1,marginTop: 20+44,}}><Buttondisabled={true}style={styles.buttonStyle}textStyle={styles.buttonTextStyle}disabledStyle={styles.buttonDisabledStyle}disabledTextStyle={styles.buttonDisabledTextStyle}>
disabled (按钮禁用)
</Button><Buttonstyle={styles.buttonStyle}textStyle={styles.buttonTextStyle}>
opacity all (按钮透明)
</Button><ButtontouchableType={Button.constants.touchableTypes.fadeContent}style={styles.buttonStyle}textStyle={styles.buttonTextStyle}>
opacity content (内容透明)
</Button><ButtontouchableType={Button.constants.touchableTypes.highlight}underlayColor={'#C90000'}style={styles.buttonStyle}textStyle={styles.buttonTextStyle}>
highlight (背景高亮)
</Button><ButtontouchableType={Button.constants.touchableTypes.blur}style={styles.buttonStyle}textStyle={styles.buttonTextStyle}>
blur for ios (模糊阴影)
</Button><Buttonloading={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><Buttonloading={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><ButtontouchableType={Button.constants.touchableTypes.highlight}underlayColor={'#C90000'}style={styles.buttonStyle}textStyle={styles.buttonTextStyle}><Imagesource={image_liking}style={{width: 40,height: 40,marginRight: 3,}}/>
icon (图标)
</Button><ButtontouchableType={Button.constants.touchableTypes.blur}style={styles.buttonStyle}textStyle={styles.buttonTextStyle}>
badge (徽章)
<Badgestyle={{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=()=>{returnthis._renderActivityIndicator()}_renderLoadingComponent_2=()=>{return(<Viewstyle={{flexDirection: 'row',alignItems: 'center'}}>{this._renderActivityIndicator()}<Textstyle={{fontSize: 17,color: 'white',fontWeight: 'bold',fontFamily: '.HelveticaNeueInterface-MediumP4',}}>loading</Text></View>)}_renderActivityIndicator(){returnActivityIndicator ? (<ActivityIndicatorstyle={{margin: 10,}}animating={true}color={'#fff'}size={'small'}/>) : Platform.OS=='android' ?
(<ProgressBarAndroidstyle={{margin: 10,}}color={'#fff'}styleAttr={'Small'}/>) : (<ActivityIndicatorIOSstyle={{margin: 10,}}animating={true}color={'#fff'}size={'small'}/>)}}exportdefaultTimerEnhance(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 |