react-native-sf-button

实现Button功能，可设置背景图片、颜色、或者图片+标题模式

安装

npm install react-native-sf-button

Props 公共属性

parameter	type	required	description	default
type	number	yes	按钮类型	null
isAnimated	bool	no	是否有点击缩放动画	no
title	string	no	标题	null
titleColor	string	no	标题颜色	black
titleFontSize	number	no	标题字体大小	16
titleAlign	string	no	标题对其方式	'center'
titleFontWeight	string	no	标题字体宽度	'normal'
titleFontFamily	string	no	标题字体	null
titelMargin	array('左','上','右','下')	no	标题边距	null
containerStyle	object	no	按钮容器样式	null
onPress	func (tag)=>{}	no	按钮点击事件	null
onPressIn	func (tag)=>{}	no	按钮按下事件	null
onPressOut	func (tag)=>{}	no	按钮抬起事件	null

Props || type=0 颜色模式

parameter	type	required	description	default
defaultColor	string	no	默认背景颜色	white
selectColor	string	no	选中背景颜色	null

Props || type=1 图片模式

parameter	type	required	description	default
defaultImage	number	yes	默认背景图片	null
selectImage	number	no	选中背景图片	null

Props || type=2 图标+标题模式

parameter	type	required	description	default
defaultIcon	number	yes	默认图标	null
selectIcon	number	no	选中图标	null
iconRatio	number（0-1）	no	图标占按钮	null
iconWidth	number	no	图标宽度（单一设置，高度自适应）	null
iconHeight	number	no	图标高度（单一设置，宽度自适应	null
iconMargin	array('左','上','右','下')	no	图标边距	null

例子

import SFButton from 'react-native-sf-button'
export default class App extends Component {
    render() {
        return (
            <View style={styles.container}>
                <SFButton
                    onPress={()=> {
                        alert('1')
                    }}
                    type={0}
                    defaultColor={'red'}
                    selectColor={'green'}
                    title={'颜色按钮'}
                    titleColor={'black'}
                    titleFontSize={16}
                    containerStyle={{
                        marginTop: 50,
                        width: 200,
                        height: 50,
                        borderWidth: 1,
                        borderColor: 'black',
                        borderRadius: 25,
                    }}
                />
                <SFButton
                    type={0}
                    defaultColor={'red'}
                    selectColor={'green'}
                    title={'颜色按钮点击缩放'}
                    isAnimated={true}
                    titleColor={'black'}
                    titleFontSize={16}
                    containerStyle={{
                        marginTop: 50,
                        width: 200,
                        height: 50,
                        borderWidth: 1,
                        borderColor: 'black',
                        borderRadius: 25,
                    }}
                />
                <SFButton
                    type={1}
                    defaultImage={require('./image/btn1.png')}
                    selectImage={require('./image/btn2.png')}
                    title={'图片按钮'}
                    titleColor={'black'}
                    titleFontSize={16}
                    containerStyle={{
                        marginTop: 50,
                        width: 200,
                        height: 50,
                    }}
                />

                <SFButton
                    type={2}
                    defaultIcon={require('./image/p1.png')}
                    selectIcon={require('./image/p2.png')}
                    iconWidth={30}
                    titelMargin={[5, 0, 0, 0]}
                    title={'图标+文字'}
                    titleColor={'black'}
                    titleFontSize={16}
                    containerStyle={{
                        marginTop: 50,
                        width: 200,
                        height: 50,
                        borderWidth: 2,
                        borderColor: 'gray',
                        borderRadius: 25,
                    }}
                />
                <SFButton
                    type={2}
                    defaultIcon={require('./image/p1.png')}
                    selectIcon={require('./image/p2.png')}
                    iconWidth={30}
                    iconRatio={0.3}
                    title={'图标+文字'}
                    titleColor={'black'}
                    titleFontSize={16}
                    containerStyle={{
                        marginTop: 50,
                        width: 200,
                        height: 50,
                        borderWidth: 2,
                        borderColor: 'gray',
                        borderRadius: 25,
                    }}
                />
                <SFButton
                    type={3}
                    containerStyle={{
                        marginTop: 50,
                        width: 200,
                        height: 50,
                        borderWidth: 2,
                        borderColor: 'gray',
                        borderRadius: 25,
                        alignItems: 'center',
                        justifyContent: 'center'
                    }}
                >
                    <Text style={{
                        color: 'black',
                        fontSize: 16
                    }}>自定义按钮</Text>
                </SFButton>
            </View>
        );
    }
}