23. 드롭다운 메뉴 가려지는 현상 해결하기

import React from 'react'
import { View, FlatList, StyleSheet, Dimensions } from 'react-native'

import DropdownItem from './DropdownItem'

function DropdownList({ categories, selectCategory, top, left, rate = 1 }){
    return (
        <View 
              style={[styles.dropdownShadow, {top, left, maxHeight: Dimensions.get("window").height * rate}]}
              onTouchStart={(e) => { // 터치 시작점 설정 : 캡쳐링 방지 (추가)
                console.log('여기를 지나침')
                e.stopPropagation() // 터치 버블링 방지
              }}
              >
              <FlatList
                data={categories} 
                keyExtractor={item => item}
                renderItem={({item}) => (
                  <DropdownItem category={item} selectCategory={(e) => selectCategory(item, e)}/> // 아이템 각각의 뷰 화면 : 카테고리 선택시 이벤트핸들러 함수 등록 (수정)
                )}
                style={styles.dropdownList}
              />
          </View>
    )
}
const styles = StyleSheet.create({
    dropdownList: {
        padding: 5,
    },
    dropdownShadow: {
        shadowOffset: { width: 0, height: 20 },
        shadowColor: '#000',
        shadowOpacity: 0.25,
        backgroundColor : "#fff", // invisible color
        zIndex: 2,
        elevation: 2,
        position: 'absolute',
        borderRadius: 5,
        margin: 15,
    },
})
export default DropdownList

components > DropdownList.js 파일을 위와 같이 수정한다.

dropdownShadow: {
        shadowOffset: { width: 0, height: 20 },
        shadowColor: '#000',
        shadowOpacity: 0.25,
        backgroundColor : "#fff", // invisible color
        zIndex: 2, // 수정
        elevation: 2, // 수정
        position: 'absolute',
        borderRadius: 5,
        margin: 15,
    },

상단의 날짜가 표시되는 DateHeader 컴포넌트의 zIndex가 1이므로 드롭다운 메뉴가 가려지지 않으려면 DropdwonList 컴포넌트의 zIndex 는 1보다 커야 한다. 

드롭다운 가려지는 문제

드롭다운 가려지는 문제 해결