过滤弹窗兼容安卓

android/app/build.gradle

@@ -130,6 +130,14 @@ android {
             include "armeabi-v7a", "x86", "arm64-v8a", "x86_64"
         }
     }
+    signingConfigs {
+        release {
+            storeFile file('../keystores/key.jks')
+            storePassword 'gkzhc2020'
+            keyAlias 'key'
+            keyPassword 'gkzhc2020'
+        }
+    }
     buildTypes {
         debug {
             resValue "string", "CodePushDeploymentKey", '"OQxOHKC_pU5KPExPvQLLfeOdhO4_zss5pKduM"'
@@ -140,6 +148,7 @@ android {
             proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
             resValue "string", "CodePushDeploymentKey", '"KEzx1DMpvRIuGoORIyvnxdf9j8HD42NEQvj1z0"'
             resValue 'string', "CODE_PUSH_APK_BUILD_TIME", String.format("\"%d\"", System.currentTimeMillis())
+            signingConfig signingConfigs.release
         }
         releaseStaging.initWith(release)
         releaseStaging {

app/base/BaseStyle.js

@@ -363,8 +363,8 @@ export const list_common_item = {
             height: 2
         },
         shadowOpacity: 1,
-        elevation: 10,
-        height: 80
+        // elevation: 10,
+        height: 80,
     },
     sub_two_btn: {
         width: Width(),

app/containers/selfOrder/module/ChooseFilter.js

@@ -19,6 +19,8 @@ import {
   TextInput,
   SafeAreaView,
   ScrollView,
+  TouchableWithoutFeedback,
+  Modal,
 } from 'react-native'
 import * as R from 'ramda'
 import {
@@ -40,6 +42,7 @@ import {
   second_text_color,
   first_text_color,
 } from '../../../base/BaseStyle'
+import { isIphoneX } from "../../../utils/Utils";
 const PropTypes = require('prop-types')
 
 export default class ChoolseFilter extends Component {
@@ -86,19 +89,16 @@ export default class ChoolseFilter extends Component {
         </View>
 
         {visible && (
-          <View
-            style={styles.searchModal}
-            visible={visible}
-            animationType="slide"
-            transparent={true}
-          >
+          <Modal style={styles.searchModal} visible={visible} transparent={true}>
             <TouchableOpacity
-              style={styles.mask}
-              onPress={() => {
+              style={styles.mask_touch}
+              onPress={e => {
                 this.setState({ visible: !visible })
               }}
+              activeOpacity={1}
             ></TouchableOpacity>
-            <View style={styles.searchContent}>
+            <View style={styles.mask}></View>
+            <View style={isIphoneX() ? [styles.searchContent, {top: 48 + 58 + pxSize(36)}] : styles.searchContent}>
               <ScrollView style={styles.scrollView}>
                 {filterData &&
                   filterData.map(item => {
@@ -124,6 +124,7 @@ export default class ChoolseFilter extends Component {
                                       } else {
                                         onCallback && onCallback(item.field, option.value)
                                       }
+                                      this.setState({ visible: !visible})
                                     }}
                                   >
                                     <Text
@@ -161,6 +162,7 @@ export default class ChoolseFilter extends Component {
                     R.map(filter => {
                       onCallback && onCallback(filter.field, '')
                     })(filterData)
+                    this.setState({ visible: !visible })
                   }}
                 >
                   <Text style={styles.resetBtnText}>重置</Text>
@@ -176,7 +178,7 @@ export default class ChoolseFilter extends Component {
                 </TouchableOpacity>
               </View>
             </View>
-          </View>
+          </Modal>
         )}
       </View>
     )
@@ -188,7 +190,6 @@ const styles = StyleSheet.create({
     width: Width(),
     height: pxSize(36),
     paddingLeft: pxSize(20),
-    zIndex: 999,
   },
   filterBarTitle: {
     flexDirection: 'row',
@@ -215,23 +216,36 @@ const styles = StyleSheet.create({
     height: pxSize(10),
   },
   searchModal: {
+    // position: 'absolute',
+    // top: pxSize(36),
+    // width: Width(),
+    // height: Height(),
+    // backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    // zIndex: 999,
+  },
+  mask_touch: {
     position: 'absolute',
-    top: pxSize(36),
     width: Width(),
     height: Height(),
-    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    zIndex: 99,
+    top: 0
   },
   mask: {
     position: 'absolute',
-    width: '100%',
-    height: '100%',
+    width: Width(),
+    height: Height(),
+    backgroundColor: 'rgba(0, 0, 0, 0.5)',
+    // zIndex: 99,
+    top: 200,
   },
   searchContent: {
     width: Width(),
     height: pxSize(300),
     backgroundColor: home_background_color,
+    top: 58 + pxSize(36),
     borderColor: '#ddd',
     borderTopWidth: 1,
+    zIndex: 999,
   },
   scrollView: {
     height: pxSize(260),

app/containers/selfOrder/module/ChooseProductPage.js

@@ -806,7 +806,7 @@ class ChooseProductPage extends Component {
 
     // 返回底部按钮
     renderFooterBtnItem() {
-        let { selectShowPopup, topProcOptionList, topActiveIndex, local_sel_options, local_cur_options, cur_hc_opts} = this.state
+        let { selectShowPopup, topProcOptionList, topActiveIndex, leftActiveIndex, filterData, local_sel_options, local_cur_options, cur_hc_opts} = this.state
         let allCountQuantity = this.getAllCountQuantity()
         let cur_sel_options = []
         let sel_tip = this.getAllCountQuantity(true)
@@ -923,6 +923,7 @@ class ChooseProductPage extends Component {
                     changeCallBack={(options, clearFlag) => this.handleChangeCallBack(options, clearFlag)}
                 />
                 { this.renderLodingItem()}
+
             </View>
         )
     }
@@ -937,7 +938,7 @@ class ChooseProductPage extends Component {
     render() {
         let { navigation } = this.props
         let { title } = navigation.state.params
-        let { topProcOptionList } = this.state
+        let { topProcOptionList, leftActiveIndex, filterData } = this.state
         return (
             <View style={styles.choo_container}>
                 <StatusBarView
@@ -945,15 +946,17 @@ class ChooseProductPage extends Component {
                     backgroundColor={promary_color}
                     barStyle='light-content'
                 />
-                <SafeAreaView style={safe_view}>
+                <View style={safe_view} >
                     <HeadBackItem title={title} navigation={navigation} callback={() => this.handleGoBack()} />
-                    <View style={styles.choo_main}>
+                    <View style={!leftActiveIndex ?[styles.choo_main, styles.choo_main_pd]: styles.choo_main} pointerEvents="auto">
                         {this.renderSearchItem()}
                         {topProcOptionList && topProcOptionList.length > 0 ? this.renderTopProItem() : null}
                         {topProcOptionList && topProcOptionList.length > 0 ? this.renderContItem() : null}
+
                     </View>
                     {this.renderFooterBtnItem()}
-                </SafeAreaView>
+                    {/* {!leftActiveIndex && <ChooseFilter filterData={filterData} onCallback={this.fillterCallback.bind(this)}/>} */}
+                </View>
             </View>
         );
     }
@@ -968,6 +971,9 @@ const styles = StyleSheet.create({
         flex: 1,
         zIndex: 99,
     },
+    choo_main_pd: {
+        // paddingTop: pxSize(36)
+    },
     top_box: {
         width: Width(),
         height: 58,