react-native自定义按钮

版权声明：本文为博主原创文章，若需转载，请注明出处 https://blog.csdn.net/suwu150/article/details/80720746

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-customer-button

Example usage:

1.basic

import Button from 'react-native-customer-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>
);
}

Code

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
ViewPropTypes,
TouchableOpacity,
TouchableHighlight,
Text,
View,
StyleSheet,
Image
} from 'react-native';

const NoDoublePress = {
lastPressTime: 1,
onPress(callback) {
const curTime = new Date().getTime();
if (curTime - this.lastPressTime > 1000) {
this.lastPressTime = curTime;
callback();
}
},
};

const styles = StyleSheet.create({
defaultStyle: {
backgroundColor: '#43CCFF',
justifyContent: 'center',
alignItems: 'center',
height: 30,
width: 100,
},
defaultTouchStyle: {
width: '100%',
height: '100%',
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
},
defaultTextStyle: {
fontSize: 15,
color: '#000000'
},
defaultRowContainer: {
flexDirection: 'row',
justifyContent: 'center',
alignItems: 'center'
}
});

class RNButton extends Component {
constructor(props) {
super(props);
this.state = {};
}

static propTypes = {
title: PropTypes.string,
style: ViewPropTypes.style,
underlayColor: PropTypes.string,
};

static defaultProps = {
title: 'ok',
};

onPress = (e) => {
NoDoublePress.onPress(() => {
this.props.onPress && this.props.onPress(e);
});
};

renderIcon = () => {
const { icon, iconStyle = {} } = this.props;
return (
<Image source={icon} style={iconStyle} />
);
};

render() {
const { title } = this.props;
if (this.props.underlayColor) {
return (
<View style={[styles.defaultStyle, this.props.style]}>
<TouchableHighlight
style={[styles.defaultTouchStyle]}
onPress={this.onPress}
underlayColor={this.props.underlayColor}
>
<View style={styles.defaultRowContainer}>
{this.renderIcon()}
<Text
style={[styles.defaultTextStyle, this.props.textStyle]}
>
{this.props.title}
</Text>
</View>
</TouchableHighlight>
</View>
);
}

return (
<View style={[styles.defaultStyle, this.props.style]}>
<TouchableOpacity
style={[styles.defaultTouchStyle]}
onPress={this.onPress}
>
<View style={styles.defaultRowContainer}>
{this.renderIcon()}
<Text
style={[styles.defaultTextStyle, this.props.textStyle]}
>
{this.props.title}
</Text>
</View>
</TouchableOpacity>
</View>

);
}
}

export default RNButton;