反应原生位置相对而不移动其他内容答案

【问题标题】：React native position relative without moving other content反应原生位置相对而不移动其他内容
【发布时间】：2019-10-08 06:13:37
【问题描述】：

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

我遇到的问题是模态正在将其下方的内容向下推（不碍事），我只是希望它位于所有内容之上。

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

这里没有可见的模态：

这是将内容推开的模式：

这是按钮的结构和它下面的模式。

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

【问题讨论】：

标签： javascript react-native css-position react-native-android

【解决方案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 并且一切正常。

不需要片段。

【讨论】：