139_上传提示语

component/AloneStudy/BannerStyle/index.js

+import '../GlobalSetting';
+import React, {Component} from 'react';
+import {View, Text, StyleSheet, Dimensions} from 'react-native';
+import MyButton from '../MyButton';
+
+const {width, height} = Dimensions.get('window');
+
+class BannerStyle extends Component {
+  constructor() {
+    super();
+  }
+
+  /**
+   * return a function to change global.bannerStyle
+   * @param num
+   * @returns {(function(): void)|*}
+   */
+  changeBannerStyle = num => {
+    return () => {
+      global.bannerStyle = num;
+      this.forceUpdate();
+    };
+  };
+
+  render() {
+    return (
+      <View style={styles.container}>
+        <MyButton
+          title={'模式1'}
+          {...styles.myButton1}
+          onPress={this.changeBannerStyle(1)}
+          disabled={global.bannerStyle === 1}
+        />
+        <MyButton
+          title={'模式2'}
+          {...styles.myButton2}
+          onPress={this.changeBannerStyle(2)}
+          disabled={global.bannerStyle === 2}
+        />
+        <MyButton
+          title={'模式3'}
+          {...styles.myButton3}
+          onPress={this.changeBannerStyle(3)}
+          disabled={global.bannerStyle === 3}
+        />
+        <MyButton
+          title={'模式4'}
+          {...styles.myButton4}
+          onPress={this.changeBannerStyle(4)}
+          disabled={global.bannerStyle === 4}
+        />
+      </View>
+    );
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#F2E2CE',
+    //opacity: 0.5,
+    flex: 1,
+  },
+  myButton1: {
+    textEnabled: {
+      color: '#bf7636',
+    },
+    buttonStyle: {
+      width: '75%',
+      borderRadius: 15,
+      borderWidth: 2,
+    },
+    buttonEnabled: {
+      backgroundColor: '#f7e2c3',
+      borderColor: '#c98c55',
+    },
+  },
+  myButton2: {
+    textEnabled: {
+      color: '#60bed9',
+    },
+    buttonStyle: {
+      width: '75%',
+      borderRadius: 15,
+      borderWidth: 2,
+    },
+    buttonEnabled: {
+      backgroundColor: '#daeae7',
+      borderColor: '#70d1e7',
+    },
+  },
+  myButton3: {
+    textEnabled: {
+      color: '#ee8bc0',
+    },
+    buttonStyle: {
+      width: '75%',
+      borderRadius: 15,
+      borderWidth: 2,
+    },
+    buttonEnabled: {
+      backgroundColor: '#f9dbe4',
+      borderColor: '#fbb9df',
+    },
+  },
+  myButton4: {
+    textEnabled: {
+      color: '#d75c4b',
+    },
+    buttonStyle: {
+      width: '75%',
+      borderRadius: 15,
+      borderWidth: 2,
+    },
+    buttonEnabled: {
+      backgroundColor: '#f1b2a6',
+      borderColor: '#e76051',
+    },
+  },
+});
+
+export default BannerStyle;