'弹窗动画效果优化'

pages/buy/buy.js

@@ -14,7 +14,7 @@ import {
     DeviceEventEmitter,
     ScrollView,
     Modal,
-    Animated
+    Animated,
 } from "react-native";
 import BasePage from "../BasePage";
 import Dimensions from '../utils/dimensions';
@@ -29,7 +29,8 @@ export default class Buy extends BasePage {
         ],
         currentTapindex: 0,
         slideAnim: new Animated.Value(-150),
-        ifDialogShow: false
+        ifDialogShow: false,
+        payType: 1
     };
     itemTap = (index) => {
         this.setState({
@@ -45,17 +46,43 @@ export default class Buy extends BasePage {
             </TouchableOpacity>
         )
     }
-    changeMethod = () => {
-        this.setState({
-            ifDialogShow: !this.state.ifDialogShow
-        }, () => {
+    dialogComeout = (index) => {
+        if (index) {
+            this.setState({
+                ifDialogShow: true
+            }, () => {
+                Animated.timing(
+                    this.state.slideAnim,
+                    {
+                        toValue: 0,
+                        duration: 300,
+                    }
+                ).start();
+            })
+        } else {
             Animated.timing(
                 this.state.slideAnim,
                 {
-                    toValue: 0,
-                    duration: 300,
+                    toValue: -150,
+                    duration: 200,
                 }
             ).start();
+            setTimeout(() => {
+                this.setState({
+                    ifDialogShow: false
+                })
+            }, 210)
+        }
+
+    }
+    setPayMethod = (type) => {
+        this.setState({
+            payType: type
+        },()=>{
+            setTimeout(() => {
+                this.dialogComeout(false)
+            }, 100)
+            
         })
     }
     render() {
@@ -82,7 +109,7 @@ export default class Buy extends BasePage {
                         {this.state.shopData.map((item, index) => this.renderItem(item, index))}
                     </View>
                 </View>
-                <TouchableOpacity style={styles.payment} onPress={() => this.changeMethod()}>
+                <TouchableOpacity style={styles.payment} onPress={() => this.dialogComeout(true)}>
                     <Text style={styles.left}>支付方式</Text>
                     <View style={styles.right}>
                         <Text style={styles.method}>微信支付</Text>
@@ -98,14 +125,45 @@ export default class Buy extends BasePage {
                 {
                     this.state.ifDialogShow
                         ?
-                        <View style={{ ...styles.dialog }}>
-                            <Animated.View style={{ ...styles.payMethod, bottom: this.state.slideAnim }}>
-                                <Text>选择支付方式</Text>
-                                {/* <View> */}
+                        <TouchableHighlight
+                            onPress={() => { this.dialogComeout(false) }}
+                            style={{ ...styles.dialog }}
+                            underlayColor={0.1}
+                        >
+                            <Animated.View
+                                style={{ ...styles.payMethod, bottom: this.state.slideAnim }}
+                                onPress={() => { alert(12311) }}
+                            >
+                                <Text style={styles.payText}>选择支付方式</Text>
+                                <TouchableOpacity activeOpacity={0.9} style={styles.payDialog} onPress={() => this.setPayMethod(1)}>
+                                    <View style={styles.dialogRow}>
+                                        <Image style={styles.payIcon} source={require('../images/common/wxPay.png')} />
+                                        <Text>微信支付</Text>
+                                    </View>
+                                    {
+                                        this.state.payType === 1
+                                            ?
+                                            <Image source={require('../images/common/check.png')} />
+                                            :
+                                            null
+                                    }
 
-                                {/* </View> */}
+                                </TouchableOpacity>
+                                <TouchableOpacity activeOpacity={0.9} style={styles.payDialog} onPress={() => this.setPayMethod(2)}>
+                                    <View style={styles.dialogRow}>
+                                        <Image style={styles.payIcon} source={require('../images/common/aliPay.png')} />
+                                        <Text>支付宝支付</Text>
+                                    </View>
+                                    {
+                                        this.state.payType === 2
+                                            ?
+                                            <Image source={require('../images/common/check.png')} />
+                                            :
+                                            null
+                                    }
+                                </TouchableOpacity>
                             </Animated.View>
-                        </View>
+                        </TouchableHighlight>
                         :
                         null
                 }
@@ -242,8 +300,7 @@ const styles = StyleSheet.create({
         width: Dimensions.width,
         height: Dimensions.height,
         position: 'absolute',
-        backgroundColor: '#000',
-        opacity: 0.4
+        backgroundColor: 'rgba(0,0,0,0.4)',
 
     },
     payMethod: {
@@ -251,6 +308,32 @@ const styles = StyleSheet.create({
         height: 150,
         position: 'absolute',
         // bottom: 0,
-        backgroundColor: '#fff'
+        backgroundColor: '#fff',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'flex-start'
+    },
+    payDialog: {
+        width: '90%',
+        borderTopWidth: 1,
+        borderColor: '#e4e4e4',
+        flexDirection: 'row',
+        alignItems: 'center',
+        justifyContent: 'space-between',
+        flex: 1
+    },
+    dialogRow: {
+        flexDirection: 'row',
+        alignItems: 'center',
+    },
+    payIcon: {
+        marginRight: 17
+    },
+    payText: {
+        fontSize: 16,
+        color: '#191919',
+        alignContent: 'center',
+        flex: 1,
+        lineHeight: 50
     }
 })

pages/components/MainPage.js

@@ -78,7 +78,34 @@ export default class MainPage extends BasePage {
     schedule: [],
     recommend: [],
     listData: [],
-    banner:[]
+    banner: [],
+    currentSwitch: { title: '学前', param: 'PRESCHOOL' },
+    switchList: [
+      { title: '幼儿园', param: 'KINDERGARTEN' },
+      { title: '学前', param: 'PRESCHOOL' },
+      { title: '小学', param: 'PRIMARY_SCHOOL' },
+      { title: '中学', param: 'MIDDLE_SCHOOL' },
+    ]
+  }
+
+  renderBtn = (item, index) => {
+    return (
+      this.state.currentSwitch.param === item.param
+        ?
+        null
+        :
+        <TouchableOpacity onPress={()=>this.switchGrade(index)} key={index} style={index === 1 ? styles.gradeItemMid : styles.gradeItem}>
+          <Text style={styles.gradeText}>{item.title}</Text>
+        </TouchableOpacity>
+    )
+  }
+
+  switchGrade=(index)=>{
+    const obj = this.state.switchList[index]
+    this.setState({
+      currentSwitch: obj
+    })
+    this.hideGradeMenu()
   }
 
   render() {
@@ -95,7 +122,7 @@ export default class MainPage extends BasePage {
           renderSectionHeader={this.sectionTitle}
           onScroll={this.hideGradeMenu}
         /> */}
-        <ScrollView style={{ height: Dimensions.height }}  onScroll={this.hideGradeMenu} >
+        <ScrollView style={{ height: Dimensions.height }} onScroll={this.hideGradeMenu} >
           {this.headerorfooterComponent()}
           {this.getSwiperElement()}
           {this.getScheduleElement()}
@@ -111,7 +138,7 @@ export default class MainPage extends BasePage {
                 ...styles.callUpGrade,
                 opacity: this.state.fadeAnim
               }}>
-              <TouchableOpacity style={styles.gradeItem}>
+              {/* <TouchableOpacity style={styles.gradeItem}>
                 <Text style={styles.gradeText}>小学</Text>
               </TouchableOpacity>
               <TouchableOpacity style={styles.gradeItemMid}>
@@ -119,7 +146,8 @@ export default class MainPage extends BasePage {
               </TouchableOpacity>
               <TouchableOpacity style={styles.gradeItem}>
                 <Text style={styles.gradeText}>中学</Text>
-              </TouchableOpacity>
+              </TouchableOpacity> */}
+              {this.state.switchList.map((item, index) => this.renderBtn(item, index))}
             </Animated.View>
           ) : (
               null
@@ -154,13 +182,13 @@ export default class MainPage extends BasePage {
               style={styles.rightBtn}
             >
               <Image
-                source={{ uri: 'https://facebook.github.io/react-native/docs/assets/favicon.png' }}
+                source={require('../images/common/switch.png')}
                 style={styles.rightBtnIcon}
               />
               <Text
                 style={styles.rightBtnText}
               >
-                {this.state.grade}
+                {this.state.currentSwitch.title}
               </Text>
             </View>
           </TouchableOpacity>
@@ -206,7 +234,7 @@ export default class MainPage extends BasePage {
       return (
         <TouchableOpacity
           style={{ width: 172, height: 86, marginRight: 12 }}
-          onPress={()=>this.toNextPage('SchedulePage')}
+          onPress={() => this.toNextPage('SchedulePage')}
           key={index}
           activeOpacity={1}
         >

pages/components/VideoExplain.js

@@ -115,16 +115,16 @@ export default class VideoExplain extends Component {
   componentWillMount() {
     BackHandler.addEventListener(
       "hardwareBackPress",
-      this.onBackAndroid.bind(this)
+      this.onBackAndroid
     );
   }
   componentWillUnmount() {
     BackHandler.removeEventListener(
       "hardwareBackPress",
-      this.onBackAndroid.bind(this)
+      this.onBackAndroid
     );
   }
-  onBackAndroid() {
+  onBackAndroid = () => {
     if (this.state.isFull) {
       return true;
     } else {