无法单击React Native下拉菜单

Question

我有一个需要单击的下拉菜单，但是当我单击其菜单项时，将单击基本项（即searchBar和也可单击的Flatlist）。我希望菜单被单击，而不是searchBar或Flatlist。我该怎么办？

这是我的模拟器的屏幕截图：

我无法在菜单上单击“阿拉伯语”和“波斯语”。

这是我的代码的一部分：

import React, { Component } from 'react';
import {StyleSheet, Text, View, FlatList, TouchableOpacity } from 'react-native';
import { List, ListItem, SearchBar } from 'react-native-elements';
import DropdownMenu from 'react-native-dropdown-menu';
import {Header, Left, Right, Icon} from 'native-base'

var SQLite = require('react-native-sqlite-storage')
var db = SQLite.openDatabase({name: 'test.sqlite', createFromLocation: '~dictionary.sqlite'})
var data = [["English", "Arabic", "Persian"]];

export default class App extends Component {
  constructor(props) {
    super(props)
    ...
    db.transaction((tx) => {
      ... 
      }

 searchFilterFunction = text => {
    ...
  };


  render() {
    return (
      <View style = {styles.container}>
        <Header style={styles.headerStyle}>
          ...
        </Header>
        <View style={{height: 3 }}/>
        <View style={styles.menuView}>
          <DropdownMenu
            bgColor={"#B38687"}
            activityTintColor={'green'}
            titleStyle={{color: '#333333'}} 
            zIndex={100} 
            handler={(selection, row) => this.setState({text4: data[selection][row]})}
            data={data}
            >
          </DropdownMenu>
          <Icon name="arrow-round-forward" style={styles.iconStyle}/>
          <DropdownMenu
            bgColor={"#B38687"}
            activityTintColor={'green'}
            titleStyle={{color: '#333333'}}
            zIndex={100} 
            handler={(selection, row) => this.setState({text: data[selection][row]})}
            data={data}
            >
          </DropdownMenu>
        </View >
        <View >
          <View style={styles.viewBorder}>
            <SearchBar
              ...
              />
          </View>
          <View style={styles.viewBorder}>
            <List containerStyle={{ flexDirection: 'column-reverse', borderTopWidth: 0, borderBottomWidth: 0 }} >
              <FlatList 
                ...
                onPress={() =>{this.props.navigation.navigate('Meaning', {data: (item.word_english +'\n' + item.word_arabic)} ); }}
                    ...
                  /> )}
                />
              </List>
            </View>
          </View>
       </View>);}
          }

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#CBEFDD',
    // flexDirection: 'column'
  },
  iconStyle:{
    backgroundColor:'#CBEFDD',
    color:'#84B071',
    marginLeft: '5%',
    marginRight: '5%',
    marginTop: 7,
    // height:30,
    // alignContent:'center'
    },
  menuView:{
    // flex:1, 
    // height: 50,
    marginLeft: 3,
    marginRight: 3,
    flexDirection:'row',
    zIndex:100,
    },
  rezvanText:{
    flex:1 ,
    fontSize: 20, 
    color: 'white',
    justifyContent:'flex-end'
    },
  headerStyle:{
    backgroundColor : "#84B071"
    },
  viewBorder: {
    backgroundColor: 'white',
    borderWidth: 2, 
    borderColor: '#B38687', 
    marginVertical:3, 
    marginLeft: 3, 
    marginRight: 3
  }


});

Answer 1

感谢安德鲁（Andrew）和this，我可以解决问题，如果有人需要，我可以给出答案！

解决方案是为包含下拉菜单的视图分配一个minHeight，并为其分配一个position: 'absolute'。然后设置约束以防止它们重叠，瞧！我在这里重新发布样式：

const styles = StyleSheet.create({
  container: {
    ...
  },
  iconStyle:{
    ...
    },
  menuView:{
    // flex:1, 
    // height: 50,
    **minHeight:215,**
    marginLeft: 3,
    marginRight: 3,
    marginTop:60,
    flexDirection:'row',
    zIndex:100,
    **position: 'absolute'**
    },
  rezvanText:{
    ...
    },
  headerStyle:{
    ...
    },
  searchBarView: {
    backgroundColor: 'white',
    borderWidth: 2, 
    borderColor: '#B38687', 
    **marginTop:51,** 
    marginLeft: 3, 
    marginRight: 3
  },
  flatListVew:{
    backgroundColor: 'white',
    borderWidth: 2, 
    borderColor: '#B38687', 
    marginVertical:3, 
    marginLeft: 3, 
    marginRight: 3
  }


});