1.0.3 • Published 6 years ago
react-native-customer-button v1.0.3
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-buttonExample 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:
render() {
return (
<View style={styles.container}>
<Text style={{ marginBottom: 10 }}>{this.state.count}</Text>
<Button
style={{ marginBottom: 5 }}
onPress={() => this.setState({ count: this.state.count + 1 })}
/>
<Button
title={'cancel'}
style={{ marginBottom: 5 }}
onPress={() => this.setState({ count: 'cancel' })}
/>
<Button
title={'submit'}
style={{
marginBottom: 5,
backgroundColor: 'gray'
}}
onPress={() => this.setState({ count: 'submit' })}
/>
<Button
title={'white font'}
style={{
marginBottom: 5,
backgroundColor: 'gray'
}}
textStyle={{
color: '#fff',
fontSize: 16
}}
underlayColor={'#ff0'}
onPress={() => this.setState({ count: 'submit' })}
/>
<Button
title={'white font'}
style={{
marginBottom: 5,
backgroundColor: 'gray'
}}
textStyle={{
color: '#fff',
fontSize: 16
}}
icon={require('../constants/icon_user.png')}
underlayColor={'#ff0'}
onPress={() => this.setState({ count: 'submit' })}
/>
</View>
);
}LICENSE:
MIT