Порядок наложения: как рендерить компонент, чтобы он отображался поверх родного брата родителей, который рендерится позже

У меня возникли проблемы с zIndex и позицией при стилизации выпадающего списка (react-native-menu). Я хочу, чтобы раскрывающийся список отображался поверх всех других компонентов этой сцены при нажатии. Я пытаюсь использовать zIndex и position, но, возможно, делаю это неправильно?

В моем коде (ниже) я отображаю иерархию, где Card > CardSection > различные подкомпоненты каждого. Выпадающий список состоит из компонентов MenuContext (конфиг) и TopNavigation (основной выпадающий список).

return (
<Card>
  <CardSection style={{zIndex: 2}}>
    <View style={thumbnailContainerStyle}>
      <Image style={thumbnailStyle}
        source={{ uri: "" }}
      />
    </View>
    <View style={headerContentStyle}>
      <Text style={headerTextStyle}>Tam</Text>
      <Text>tam@tam</Text>
    </View>
    <MenuContext style={{ flex:1, zIndex:6, position:'absolute', flexDirection: 'column', alignItems: 'flex-end' }} >
      <TopNavigation/> //this is 
    </MenuContext>
  </CardSection>
  <CardSection style={{zIndex: 1}}>
    <Text style={{zIndex: 2}}>{props.post.body}</Text>
  </CardSection>
</Card>
)

Таким образом, раскрывающийся список является дочерним элементом первого CardSection. Я заставил его появиться поверх собственного родителя CardSection, но я не могу заставить его появиться поверх второго CardSection, который отображается после. Поэтому я не могу заставить его отображаться поверх родного брата его родителя.

Я не хочу использовать какой-либо плагин или обходной путь.

Любые идеи? Спасибо!!


react-native z-index css-position position
person Tam Borine    schedule 02.01.2017    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Так что было так сложно отобразить всплывающее меню над вещами на оси Z, так это брат его родителя. Итак, что помогло мне получить нужные мне результаты, так это поиск большего количества макросов и перемещение <ContextMenu/> выше в иерархии компонентов, из этого компонента в целом и в его родителя.

Я должен был предположить это, так как документы для исходного пакета, который я использовал, имели ContextMenu в точке входа в приложение и такие комментарии, как:

 // You need to place a MenuContext somewhere in your application,usually at the root. 
  // Menus will open within the context, and only one menu can open at a time per context.

Моя ошибка заключалась в том, что я заблудился в микромире zIndex и position и предположил, что то, что выглядело как проблема со стилем, должно быть решено с помощью решения для стиля. Я забыл о большей картине.

person Tam Borine    schedule 02.01.2017