React Native中如何设置absolute定位让Modal固定在触发按钮下方

已解决：问题为不清楚该用什么组件实现点击按钮弹出固定在按钮下方的菜单需求，可直接使用社区的通用气泡/引导提示类组件实现，也可自行编码实现。

原问题场景 #

在React Native中开发了一个充当选择器的组件，现有代码如下：

<Modal
  transparent
  visible={editVisible}
  animationType="fade"
  onRequestClose={modalChange}>
  <Pressable style={styles.modalView} onPressOut={modalChange}>
    <View style={styles.modalContainer}>
      <TouchableOpacity style={styles.button} onPressOut={modalChange}>
        <Text>编辑按钮</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.button} onPressOut={modalChange}>
        <Text>删除按钮</Text>
      </TouchableOpacity>
    </View>
  </Pressable>
</Modal>
<TouchableOpacity onPress={modalChange}>
  <Ionicons name="ios-ellipsis-horizontal-sharp" size={20} />
</TouchableOpacity>

需要实现modalContainer始终固定在承载Ionicons图标的TouchableOpacity下方的效果，已经给该TouchableOpacity设置了position: 'relative'，modalContainer的样式配置如下：

modalContainer: {
  position: 'absolute',
  bottom: 0,
  right: 0,
}

配置后没有达到预期效果，原因是React Native的position规则和常规CSS类似，absolute定位仅相对于直接父元素生效，而Modal组件默认挂载在应用根节点下，和触发按钮不在同一个父容器层级，所以对按钮设置relative不会对Modal内的元素生效。

简化需求 #

点击按钮时展示的操作菜单，始终固定在该触发按钮的下方。

自行实现方案 #

方案1：移除Modal组件（推荐轻量场景） #

将菜单容器和触发按钮放在同一个父容器内，给父容器设置相对定位即可，修改后结构如下：

// 父容器设置相对定位
<View style={{position: 'relative'}}>
  {/* 操作菜单，点击按钮时切换展示状态 */}
  {editVisible && (
    <View style={styles.modalContainer}>
      <TouchableOpacity style={styles.button} onPress={modalChange}>
        <Text>编辑按钮</Text>
      </TouchableOpacity>
      <TouchableOpacity style={styles.button} onPress={modalChange}>
        <Text>删除按钮</Text>
      </TouchableOpacity>
    </View>
  )}
  {/* 触发按钮 */}
  <TouchableOpacity onPress={modalChange}>
    <Ionicons name="ios-ellipsis-horizontal-sharp" size={20} />
  </TouchableOpacity>
</View>

调整modalContainer样式：

modalContainer: {
  position: 'absolute',
  top: 24, // 可根据按钮高度调整，为按钮高度+菜单和按钮的间距
  right: 0,
  backgroundColor: '#ffffff',
  borderRadius: 4,
  paddingVertical: 8,
  shadowColor: '#000000',
  shadowOffset: {width: 0, height: 2},
  shadowOpacity: 0.1,
  shadowRadius: 4,
  elevation: 3,
}

如果需要点击菜单外区域关闭的效果，可以在最外层加一个全屏的透明Pressable，和菜单同级，点击时触发关闭逻辑即可。

方案2：保留Modal组件（适合需要全屏蒙层的场景） #

如果必须使用Modal组件，可以在点击触发按钮时，通过元素的measure方法获取按钮在屏幕上的坐标和宽高，动态设置Modal内菜单的偏移量即可。

内容的提问来源于stack exchange，提问作者Zuet