Принесите View поверх Modal, используя стиль zIndex с React-Native

zIndex была введена недавно Реагировать-Native изменить положение View в стеке слоев.

Хотя, я не в состоянии принести View сверху Modal компонента.

Мой код выглядит так:

render() {
  return (
    <View>
      <Modal visible>
        {props.children}
      </Modal>
      <View style={{ zIndex: 1000 }}>
        <Text>Loading...</Text>
      </View>
    </View>
  );
}

Думаю, я мог бы перестать использовать <Modal> и создать обычный анимированный <View> который будет вести себя как Modal, но я бы предпочел найти другое решение.

Есть идеи?

Ответ 1

К сожалению, никакие манипуляции с zIndex не приведут к чему-то более высокому, чем "TG41". Компонент Modal является нативным представлением, которое находится поверх остальной части вашего реактивного приложения. Единственный способ поставить что-то выше этого - это поместить что-то в сам модал или, альтернативно, использовать только модальную реализацию js.

Между прочим, версия мода-реактивного-сообщества-сообщества также построена на модале реактивного-натива, поэтому будет иметь такую же проблему. Здесь обсуждается другая реализация js:https://github.com/react-native-community/react-native-modal/issues/145

Ответ 2

Вы должны изменить z-индекс модального, а не один из представлений (и z-индекс значения 1 будет достаточным):

render() {
  return (
    <View>
      <Modal visible style={{ zIndex: 1 }}>
        {props.children}
      </Modal>
      <View>
        <Text>Loading...</Text>
      </View>
    </View>
  );
}

Элемент с большим z-индексом обычно покрывает элемент с более низким (MDN docs).

РЕДАКТИРОВАТЬ:

Другим решением является изменение порядка элементов:

render() {
  return (
    <View>
      <View>
        <Text>Loading...</Text>
      </View>
      <Modal visible>
        {props.children}
      </Modal>
    </View>
  );
}

С помощью этого решения вам не нужен z-index потому что модаль уже находится поверх представления.

Ответ 3

Не возможно с модальным. Поскольку модальное значение всегда должно отображаться независимо от того, какой ему дан zIndex и другие компоненты на экране

Он всегда будет отображаться, пока вы не сделаете видимым = false

Чтобы реализовать то, что вы хотите. Вы можете использовать абсолютно позиционированное представление с некоторым трюком zIndex, чтобы переместить это представление вперед и назад.

render() {
  return (
    <View>
       <View style={{position:'absolute',top:0,bottom:0,left:0,right:0,zIndex:visible?-1:2}}>
          {props.children}
       </View>
       <View style={{ zIndex: 1 }}>
          <Text>Loading...</Text>
       </View>
     </View>
  );
}