The final rendering
Description:
A custom button component that should render nicely on any platform. Supports a minimal level of customization.
Installation:
npm install --save react-native-custom-button
Example usage:
1.basic
import Button from 'react-native-custom-button';
...
_onPress = () => {
console.log('onPress');
}
render() {
return (
<View style={styles.container}>
<Button onPress={this._onPress} />
</View>
);
}
Props:
Props | Explain | type | require | default |
---|---|---|---|---|
onPress | handler to be called when the user taps the button | function | yes | no |
title | text to display inside the button | string | yes | ok |
disabled | If true, disable all interactions for this component. | bool | no | false |
style | button style,The style used to modify the button | object | no | { backgroundColor: '#43CCFF',height: 30,width: 100,} |
textStyle | The style of the text in the button | object | no | {fontSize: 15, color: '#000000'} |
icon | button icon file resource, resource file introduced by require | Image resources | no | no |
iconStyle | Image's style | object | no | {} |
Examples from props:
{ return <View style=stylescontainer> <Text style= marginBottom: 10 >thisstatecount</Text> <Button style= marginBottom: 5 onPress= this /> <Button title='cancel' style= marginBottom: 5 onPress= this /> <Button title='submit' style= marginBottom: 5 backgroundColor: 'gray' onPress= this /> <Button title='white font' style= marginBottom: 5 backgroundColor: 'gray' textStyle= color: '#fff' fontSize: 16 underlayColor='#ff0' onPress= this /> <Button title='white font' style= marginBottom: 5 backgroundColor: 'gray' textStyle= color: '#fff' fontSize: 16 icon= underlayColor='#ff0' onPress= this /> </View> ; }
LICENSE:
MIT