react-native-smart-button

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

Preview

Installation

npm install react-native-smart-button --save

Full Demo

see ReactNativeComponentDemos

Usage

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)

Props

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