108 lines
2.4 KiB
JavaScript
108 lines
2.4 KiB
JavaScript
import React from 'react';
|
|
import {
|
|
StyleSheet,
|
|
View,
|
|
Text,
|
|
TouchableOpacity,
|
|
} from 'react-native';
|
|
|
|
|
|
|
|
export default class Button extends React.Component {
|
|
|
|
|
|
render() {
|
|
|
|
if (!this.props.visible) {
|
|
return false;
|
|
}
|
|
if (!this.props.label) {
|
|
return false;
|
|
}
|
|
if (!this.props.onClick) {
|
|
return false;
|
|
}
|
|
|
|
return (
|
|
<View style={styles.component}>
|
|
<View style={styles.layouts}>
|
|
<View style={styles.layout}>
|
|
<View style={styles.itemcontainer}>
|
|
<View style={styles.itemcontainerInner}>
|
|
<TouchableOpacity
|
|
style={styles.chocolate}
|
|
onPress={this.props.onClick}
|
|
>
|
|
<Text style={styles.item1TouchableOpacity}>
|
|
{this.props.label}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
</View>
|
|
);
|
|
}
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
|
|
component: {
|
|
width: '100%',
|
|
flexDirection: 'row',
|
|
paddingLeft: 7.5,
|
|
paddingRight: 7.5,
|
|
paddingTop: 7.5,
|
|
paddingBottom: 7.5,
|
|
},
|
|
|
|
layouts: {
|
|
flexDirection: 'row',
|
|
flexWrap: 'wrap',
|
|
},
|
|
|
|
layout: {
|
|
width: '100%',
|
|
height: 90,
|
|
},
|
|
|
|
itemcontainer: {
|
|
width: '100%',
|
|
height: '100%',
|
|
paddingTop: 7.5,
|
|
paddingBottom: 7.5,
|
|
paddingLeft: 7.5,
|
|
paddingRight: 7.5,
|
|
},
|
|
|
|
itemcontainerInner: {
|
|
width: '100%',
|
|
height: '100%',
|
|
position: 'relative',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
},
|
|
|
|
chocolate: {
|
|
backgroundColor: '#1194f6',
|
|
borderWidth: 0,
|
|
borderColor: '#eee',
|
|
borderStyle: 'solid',
|
|
borderRadius: 4,
|
|
width: '100%',
|
|
height: '100%',
|
|
justifyContent: 'center',
|
|
alignItems: 'center',
|
|
overflow: 'hidden',
|
|
padding: 10,
|
|
},
|
|
|
|
buttonText: {
|
|
color: '#fff',
|
|
fontSize: 14,
|
|
textAlign: 'center',
|
|
width: '100%',
|
|
},
|
|
|
|
}); |