304_upadte标语风格切换

component/OnlineStudy/BannerStyle/index.js

 import '../GlobalSetting';
 import React, {Component} from 'react';
 import {View, Text, StyleSheet, Dimensions} from 'react-native';
-import {Button} from 'react-native-elements';
+import MyButton from '../MyButton';
 
 const {width, height} = Dimensions.get('window');
 
@@ -10,48 +10,34 @@ class BannerStyle extends Component {
     super();
   }
 
+  changeBannerStyle = num => {
+    return () => {
+      global.bannerStyle = num;
+      this.forceUpdate();
+    };
+  };
+
   render() {
     return (
       <View style={styles.container}>
-        <Text style={styles.text}>Study自习模块</Text>
-        <Button
-          buttonStyle={styles.buttonStyle}
-          containerStyle={styles.button_containerStyle}
-          title="button"
-          onPress={() => {
-            global.bannerStyle = 1;
-            this.forceUpdate();
-          }}
+        <MyButton
+          title={'模式1'}
+          onPress={this.changeBannerStyle(1)}
           disabled={global.bannerStyle === 1}
         />
-        <Button
-          buttonStyle={styles.buttonStyle}
-          containerStyle={styles.button_containerStyle}
-          title="button"
-          onPress={() => {
-            global.bannerStyle = 2;
-            this.forceUpdate();
-          }}
+        <MyButton
+          title={'模式2'}
+          onPress={this.changeBannerStyle(2)}
           disabled={global.bannerStyle === 2}
         />
-        <Button
-          buttonStyle={styles.buttonStyle}
-          containerStyle={styles.button_containerStyle}
-          title="button"
-          onPress={() => {
-            global.bannerStyle = 3;
-            this.forceUpdate();
-          }}
+        <MyButton
+          title={'模式3'}
+          onPress={this.changeBannerStyle(3)}
           disabled={global.bannerStyle === 3}
         />
-        <Button
-          buttonStyle={styles.buttonStyle}
-          containerStyle={styles.button_containerStyle}
-          title="button"
-          onPress={() => {
-            global.bannerStyle = 4;
-            this.forceUpdate();
-          }}
+        <MyButton
+          title={'模式4'}
+          onPress={this.changeBannerStyle(4)}
           disabled={global.bannerStyle === 4}
         />
       </View>
@@ -65,19 +51,6 @@ const styles = StyleSheet.create({
     //opacity: 0.5,
     flex: 1,
   },
-  text: {
-    fontSize: 50,
-    fontWeight: 'bold',
-    textAlign: 'center',
-  },
-  buttonStyle: {
-    backgroundColor: '#BF7636',
-    borderRadius: 3,
-  },
-  button_containerStyle: {
-    width: parseInt(width) / 2,
-    marginHorizontal: parseInt(width) / 4,
-  },
 });
 
 export default BannerStyle;

component/OnlineStudy/MyButton/index.js

@@ -21,18 +21,22 @@ class MyButton extends Component {
     onPressIn: PropTypes.func,
     onPressOut: PropTypes.func,
     onPress: PropTypes.func,
+    disabled: PropTypes.bool,
   };
 
   render() {
-    const {style, title, onPressIn, onPressOut, onPress} = this.props;
+    const {style, title, onPressIn, onPressOut, onPress, disabled} = this.props;
     return (
       <View style={{...styles.container, ...style}}>
         <TouchableOpacity
-          style={styles.buttonStyle}
+          disabled={disabled}
+          style={disabled ? styles.buttonDisabled : styles.buttonStyle}
           onPressIn={onPressIn}
           onPressOut={onPressOut}
           onPress={onPress}>
-          <Text style={styles.textInButton}>{title}</Text>
+          <Text style={disabled ? styles.textDisabled : styles.textInButton}>
+            {title}
+          </Text>
         </TouchableOpacity>
       </View>
     );
@@ -44,6 +48,14 @@ const styles = StyleSheet.create({
     justifyContent: 'center',
     flex: 1,
   },
+  textDisabled: {
+    flex: 1,
+    fontSize: parseInt(height) / 23,
+    color: '#a0a0a0',
+    fontWeight: 'bold',
+    textAlign: 'center',
+    textAlignVertical: 'center',
+  },
   textInButton: {
     flex: 1,
     fontSize: parseInt(height) / 23,
@@ -52,6 +64,15 @@ const styles = StyleSheet.create({
     textAlign: 'center',
     textAlignVertical: 'center',
   },
+  buttonDisabled: {
+    alignSelf: 'center',
+    backgroundColor: '#e6e6e6',
+    height: parseInt(height) / 8,
+    width: '50%',
+    borderRadius: 40,
+    borderWidth: 4,
+    borderColor: '#D6D6D6',
+  },
   buttonStyle: {
     alignSelf: 'center',
     backgroundColor: '#e1c3a1',

component/OnlineStudy/OnlineStudyHome/index.js

@@ -25,7 +25,7 @@ class OnlineStudyHome extends Component {
       <View style={styles.container}>
         <Pressable
           android_ripple={{
-            color: '#BF7636',
+            color: '#FFFFFF',
             foreground: true,
           }}
           onPress={this.twoPlayerPK}
@@ -34,7 +34,7 @@ class OnlineStudyHome extends Component {
         </Pressable>
         <Pressable
           android_ripple={{
-            color: '#BF7636',
+            color: '#FFFFFF',
             foreground: true,
           }}
           onPress={this.twoPlayerPK}