react-native-sf-button v1.2.5

react-native-sf-button

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

安装

npm install react-native-sf-button

Props 公共属性

Props || type=0 颜色模式

Props || type=1 图片模式

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

例子

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>
        );
    }
}