Реагировать на родную позицию относительно, не перемещая другой контент - PullRequest
Новая
       59

Реагировать на родную позицию относительно, не перемещая другой контент

1 голос
/ 08 октября 2019

Я создаю пользовательский модал, который появляется при нажатии кнопки, похожий на вид всплывающей подсказки, но с возможностью выбора полей.

Проблема, с которой я столкнулся, заключается в том, что модал толкает содержимое под ним (с пути), и я просто хочу, чтобы он был поверх всего.

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

Здесь без модального видимого: As things should be, in line

Вот модал, выталкивающий содержимое из пути: This should be onto of all other content

Это структура кнопкии модал под ним. 

<>
  <View style={[styles.f_con]}>
    <Text style={[styles.f_title, item.required && styles.f_required]}>{item.title}</Text>
    <TouchableOpacity style={styles.d_btn} onPress={e => setVisible(true)}>
      <Text>{selection !== null ? item.options[selection] : 'Select from list'}</Text>
    </TouchableOpacity>
  </View>
  <SelectModal visible={visible} close={close} item={item} clear={() => makeSelection(null)}>
    {item.options.map((option, index) => (
      <TouchableOpacity style={styles.s_option_con} key={index} onPress={() => makeSelection(index)} value={option}>
        <Text style={styles.s_option_txt}>{option}</Text>
      </TouchableOpacity>
    ))}
  </SelectModal>
</>

Это мой модальный стиль 

modal: {
    position: 'relative',
    backgroundColor: Colors.secondaryBackground,
    top: -30,
    left: 100,
    height: 'auto',
    borderRadius: 12,
    width: 250,
    zIndex: 20
  }

1 Ответ

0 голосов
/ 08 октября 2019

Я нашел решение, если у кого-то есть подобная проблема:

Я реструктурировал элемент с модальным, чтобы иметь модальное потомство следующим образом: 

<View style={[styles.f_con, { zIndex: 2 }]}>
      <Text style={[styles.f_title, item.required && styles.f_required]}>{item.title}</Text>
      <TouchableOpacity style={styles.d_btn} onPress={e => setVisible(true)}>
        <Text>{selection !== null ? item.options[selection] : 'Select from list'}</Text>
      </TouchableOpacity>
      <SelectModal visible={visible} close={close} item={item} clear={() => makeSelection(null)}>
        {item.options.map((option, index) => (
          <TouchableOpacity style={styles.s_option_con} key={index} onPress={() => makeSelection(index)} value={option}>
            <Text style={styles.s_option_txt}>{option}</Text>
          </TouchableOpacity>
        ))}
      </SelectModal>
</View>

Я изменил позициюиз модального в position: 'absolute' и гарантировал, что zIndex элемента был zIndex: 2, и все работает.

Фрагменты не нужны.

...