139_上传MyButton文件

component/AloneStudy/MyButton/index.js

+import React, {Component} from 'react';
+import {
+  Text,
+  StyleSheet,
+  Dimensions,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import PropTypes from 'prop-types';
+
+const {width, height} = Dimensions.get('window');
+
+class MyButton extends Component {
+  constructor() {
+    super();
+  }
+
+  static propTypes = {
+    containerStyle: PropTypes.object,
+    buttonStyle: PropTypes.object,
+    textStyle: PropTypes.object,
+    buttonEnabled: PropTypes.object,
+    textEnabled: PropTypes.object,
+    buttonDisabled: PropTypes.object,
+    textDisabled: PropTypes.object,
+    title: PropTypes.string,
+    onPressIn: PropTypes.func,
+    onPressOut: PropTypes.func,
+    onPress: PropTypes.func,
+    disabled: PropTypes.bool,
+  };
+
+  render() {
+    const {
+      containerStyle,
+      buttonStyle,
+      textStyle,
+      buttonEnabled,
+      textEnabled,
+      buttonDisabled,
+      textDisabled,
+      title,
+      onPressIn,
+      onPressOut,
+      onPress,
+      disabled,
+    } = this.props;
+
+    const container = {...styles.container, ...containerStyle};
+    const buttonDefault = {...styles.buttonStyle, ...buttonStyle};
+    const textDefault = {...styles.textStyle, ...textStyle};
+    const button = disabled
+      ? {...buttonDefault, ...styles.buttonDisabled, ...buttonDisabled}
+      : {...buttonDefault, ...styles.buttonEnabled, ...buttonEnabled};
+    const text = disabled
+      ? {...textDefault, ...styles.textDisabled, ...textDisabled}
+      : {...textDefault, ...styles.textEnabled, ...textEnabled};
+    return (
+      <View style={container}>
+        <TouchableOpacity
+          disabled={disabled}
+          style={button}
+          onPressIn={onPressIn}
+          onPressOut={onPressOut}
+          onPress={onPress}>
+          <Text style={text}>{title}</Text>
+        </TouchableOpacity>
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    justifyContent: 'center',
+    flex: 1,
+  },
+  textEnabled: {
+    color: '#592202',
+  },
+  textDisabled: {
+    color: '#a0a0a0',
+  },
+  textStyle: {
+    flex: 1,
+    fontSize: parseInt(height) / 28,
+    fontWeight: 'bold',
+    textAlign: 'center',
+    textAlignVertical: 'center',
+  },
+  buttonEnabled: {
+    backgroundColor: '#e1c3a1',
+    borderColor: '#BF7636',
+  },
+  buttonDisabled: {
+    backgroundColor: '#e6e6e6',
+    borderColor: '#D6D6D6',
+  },
+  buttonStyle: {
+    alignSelf: 'center',
+    height: parseInt(height) / 8,
+    width: '50%',
+    borderRadius: 40,
+    borderWidth: 4,
+  },
+});
+
+export default MyButton;