是否有一个库或下拉菜单不与其他组件重叠的方式？

Question

我正在尝试使用react native创建下拉菜单，我想创建一个下拉菜单。

我尝试使用react-native-dropdown-menu，其中下拉列表被其他组件重叠。如何使我的下拉菜单与其他组件重叠

  render () {
    var data = [["Mr.", "Mrs.", "Ms."]];

    return(
      <View style={styles.container}>
      <Transition shared="logo">
      </Transition>
        <Text style={styles.title}>Register</Text>
        <View style={styles.nameTitle}>
          <DropdownMenu
          style={{overflow: 'visible', flex: 0, borderTopLeftRadius: 8, borderBottomLeftRadius: 8, justifyContent: 'center', alignItems: 'center', width: 0.15 * screenWidth, backgroundColor: '#F0F0F0', height: 40}}
          bgColor='white'
          tintColor={'#666666'}
          activityTintColor={'#CC6666'}
          handler={(selection, row) => this.setState({title: data[selection][row]})}
          data={data}
          menuContainerStyle={{zIndex: 5}}
          />
          <TextInput style={styles.textInputStyleName}
          placeholder="Name"
          placeholderTextColor="black"
          onChangeText={(text) => this.setState({name: text})}
          />
        </View>
        <TextInput style={styles.textInputStyle}
        placeholder="Email ID"
        placeholderTextColor="black"
        onChangeText={(text) => this.setState({email: text})}
        />
        <TextInput style={styles.textInputStyle}
        placeholder="Phone"
        placeholderTextColor="black"
        keyboardType='number-pad'
        onChangeText={(text) => this.setState({phoneNo: text})}
        />
        <TextInput style={styles.textInputStyle}
        placeholder="Password"
        placeholderTextColor="black"
        secureTextEntry={true}
        onChangeText={(text) => this.setState({password: text})}
        />
        <TextInput style={styles.textInputStyle}
        placeholder="Confirm Password"
        placeholderTextColor="black"
        secureTextEntry={true}
        onChangeText={(text) => this.setState({password_re: text})}
        />
        <TouchableOpacity style={styles.opacity} onPress={() => this.openUpPicker()}>
          <Image source={require('../Assets/birthday-cake.png')}
          style={{height: 25, width: 25}}/>
          <Text style={{color: '#CC6666',fontSize: 15, fontWeight: 'bold', marginLeft: 15, letterSpacing: 0.5}}>Date of Birth</Text>
        </TouchableOpacity>
        <TouchableOpacity style={styles.opacity} onPress={() => this.handleChoosePhoto()}>
        <Image source={require('../Assets/icon.png')}
        style={{height: 25, width: 25}}/>
        <Text style={{color: '#CC6666',fontSize: 15, fontWeight: 'bold', marginLeft: 15, letterSpacing: 0.5}}>Upload Photo</Text>
        </TouchableOpacity>
        <View style={styles.opacityLower}>
        <TouchableOpacity style={{backgroundColor: '#F8F8F8', height: 50, width: 50, borderRadius: 25, justifyContent: 'center', alignItems: 'center'}} onPress={() => this.props.navigation.goBack()}>
        <Image source={require('../Assets/back.png')}
        style={{height: 25,width: 25}}/>
        </TouchableOpacity>
        <TouchableOpacity style={styles.nextButton}
        onPress={() => this.validationFunction()}>
          <Text style={{color: 'white', fontSize: 16, fontWeight: '500'}}>NEXT</Text>
        </TouchableOpacity>
        </View>
      </View>
    );
  }



const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  nameTitle: {
    flex: 0,
    height: 40,
    width: 0.7 * screenWidth,
    marginBottom: 20,
    marginTop: 20,
  },
  title: {
    color: 'black',
    fontWeight: 'bold',
    fontSize: 18,
    marginTop: 30,
    letterSpacing: 0.5
  },
  textInputStyle: {
    backgroundColor: '#F8F8F8',
    width: 0.7 * screenWidth,
    height: 40,
    borderColor: "#F0F0F0",
    borderWidth: 1,
    marginBottom: 20,
    borderRadius: 8,
    paddingHorizontal: 20,
    letterSpacing: 0.5
  },
  textInputStyleName: {
    backgroundColor: '#F8F8F8',
    width: 0.55 * screenWidth,
    height: 40,
    borderColor: "#F0F0F0",
    borderWidth: 1,
    borderTopRightRadius: 8,
    borderBottomRightRadius: 8,
    paddingHorizontal: 20,
    letterSpacing: 0.5
  },
  opacity: {
    width: '70%',
    height: 40,
    marginBottom: 20,
    borderRadius: 25,
    backgroundColor: 'white',
    flexDirection: 'row',
    alignItems: 'center'
  },
  opacityLower: {
      width: '70%',
      height: 50,
      borderRadius: 25,
      backgroundColor: 'white',
      flexDirection: 'row',
      marginBottom: 15
  },
  nextButton: {
    width: 210,
    marginLeft: 20,
    height: 50,
    borderRadius: 25,
    backgroundColor: '#CC6666',
    alignItems: 'center',
    justifyContent: 'center'
  },
})

我希望下拉列表与文本字段重叠，而不是相反。你们可以建议一个不同的库或解决方法。 我为此使用react-native-dropdown-menu

提前谢谢。This is the issue created