React Native z-index 奇怪的行為

Question

我正在嘗試編寫我的自定義下拉組件，但我有一個問題，即使我將 position 絕對設置為我的模態和高 z-index，在我的下拉列表下方的組件似乎在頂部。 此行為不會在 web 開發中正常發生，因為position: absolute創建新的層堆棧。 如何解決？

const Container = styled(Flex)`
  position: relative;
`

const Options = styled(Flex)`
  background-color: ${colors.white};
  position: absolute;
  z-index: 999999;
  transform: translateY(26px);
  top: 0;
  left: 4px;
  right: 4px;
  box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.16);
  border-bottom-left-radius: 26px;
  border-bottom-right-radius: 26px;
`

const Option = styled(TouchableOpacity)`
  display: flex;
  justify-content: center;
  flex-grow: 1;
  height: 52px;
  padding: 0 16px;
`

const Select = (props: Props) => {
  const { items, value, ...rest } = props

  return (
    <Container direction="column">
      <Input />
      <Options direction="column">
        <Option>
          <Text>Opcja 1</Text>
        </Option>
        <Option>
          <Text>Opcja 1</Text>
        </Option>
      </Options>
    </Container>
  )
}

export { Select }

Answer 1

發生這種情況是因為所有Options容器都具有相同的 z-index，要解決此問題，您可以將 zIndex 作為 prop 傳遞給樣式化組件，您傳遞的值取決於 dropDown 是否處於活動狀態，因此如果它處於活動狀態，則傳遞一個高值，如果它沒有傳遞低值，這確保活動的下拉菜單總是在頂部，同樣為了正常工作，它們應該是一個擴展的下拉菜單或沒有

const Options = styled(Flex)`
  background-color: ${colors.white};
  position: absolute;
  z-index:${({zIndex})=>zIndex} ;
  transform: translateY(26px);
  top: 0;
  left: 4px;
  right: 4px;
  box-shadow: 0 -3px 6px rgba(0, 0, 0, 0.16);
  border-bottom-left-radius: 26px;
  border-bottom-right-radius: 26px;
`



const Select = (props: Props) => {
  const { items,index, value,isActive,setActiveDropDown, ...rest } = props

  return (
    <Container onClick{e=>setActiveDropDown(index)}  direction="column">
      <Input />
      {
         isActive
         ?<Options  zIndex={isActive?9000:1000}  direction="column">
        <Option>
          <Text>Opcja 1</Text>
        </Option>
        <Option>
          <Text>Opcja 1</Text>
        </Option>
      </Options>
        :null
      }
    </Container>
  )
}

在您的選擇中：

const Wrapper=()=>{
      //initializing  activeDropDown <ith -1 means all dropdowns are collapsed 
      const [activeDropDown,setActiveDropDown]=useSate(-1)

    return <View>
         <Select setActiveDropDown={setActiveDropDown} index={0} isActive={activeDropDown==0}  />
         <Select setActiveDropDown={setActiveDropDown} index={1} isActive={activeDropDown==1}  />
         <Select setActiveDropDown={setActiveDropDown} index={2} isActive={activeDropDown==2}  />
    </View>

}