javascript - react native 相对位置而不移动其他内容

Question

我正在创建一个自定义模式，当您单击按钮时会出现该模式，类似于工具提示外观，但具有可选字段。

我遇到的问题是模态将其下方的内容推下(不妨碍)，而我只是希望它位于所有内容之上。

我使用片段来尝试使模式保持与所有其他元素相同的级别和相对位置，以维持其被单击的位置。

这里没有可见模式:

这是将内容推开的模式:

这是按钮及其下面的模式的结构。

<>
  <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
  }

Answer 1

如果有人遇到类似问题，我找到了解决方案:

我用模态重组了项目，将模态作为子项，如下所示:

<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 并且一切正常。

不必要的片段。