时间戳

首页 > 解决方案 > 反应原生位置相对而不移动其他内容

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

问题描述

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

我遇到的问题是模态正在将其下方的内容向下推（不碍事），我只是希望它超越一切。

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

这是没有可见的模态： 事情应该是这样的

这是将内容推开的模式： 这应该是所有其他内容的

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

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

标签： javascriptreact-nativecss-positionreact-native-android

解决方案

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

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

<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并且所有工作。

片段是不必要的。

推荐阅读