React Native Android下Tamagui Popover与ControlledInput对齐问题求助

问题背景 #

我在开发基于Tamagui的React Native项目时，遇到Android端特有的布局问题：Dialog内的ControlledInput对应的Popover无法在输入框下方正确对齐，iOS端表现正常。简化代码如下：

<Popover
  size="$3"
  open={suggestionsOpen}
  onOpenChange={setSuggestionsOpen}
  placement="bottom-start"
  offset={{ mainAxis: 4 }}
>
  <Popover.Anchor>
    <ControlledInput
      control={control}
      name="name"
      label="Item name"
      inputProps={{
        onChangeText: onChangeSearchTerm,
        onFocus: () => {
          setSuggestionsOpen(true);
        },
        onLayout: ({ nativeEvent }) => {
          inputLayoutRef.current = nativeEvent.layout;
        },
      }}
    />
  </Popover.Anchor>
  {searchLineItems && searchLineItems.length > 0 && (
    <Popover.Content
      px={0}
      py={0}
      elevate
      width={inputLayoutRef.current?.width || 0}
      borderWidth={1}
      borderColor="$outlineColor"
      borderRadius="$3"
      disableFocusScope
      top={Platform.OS === 'android' '107%' : 0} {/* 存在语法错误 */}
    >
      {/* Popover content */}
    </Popover.Content>
  )}
</Popover>

已尝试的无效方案：

• 调整placement属性
• 使用usePopoverContext钩子
• 在Popover和Dialog的父元素添加position: relative样式

针对性解决方案 #

1. 修复语法错误

代码中top属性的三元表达式缺少?，这会导致Android端定位逻辑失效，修正为：

top={Platform.OS === 'android' ? '107%' : 0}

2. 手动指定锚点布局

利用onLayout获取的输入框布局信息，通过Popover的anchorRect属性强制指定锚点，避免嵌套Dialog带来的自动计算偏差：

<Popover
  size="$3"
  open={suggestionsOpen}
  onOpenChange={setSuggestionsOpen}
  placement="bottom-start"
  offset={{ mainAxis: 4 }}
  anchorRect={inputLayoutRef.current} {/* 手动传递锚点布局 */}
>
  {/* 其余代码保持不变 */}
</Popover>

3. 调整Dialog的安全区域设置

Android端Dialog的安全区域或内边距可能干扰Popover定位，尝试给Dialog添加safeArea="none"消除额外内边距影响：

<Dialog safeArea="none">
  {/* 包含Popover的内容 */}
</Dialog>

4. 禁用自动定位，手动控制位置

如果自动定位始终异常，可以禁用Tamagui的定位逻辑，通过输入框的布局信息手动计算Popover位置：

<Popover.Content
  px={0}
  py={0}
  elevate
  width={inputLayoutRef.current?.width || 0}
  borderWidth={1}
  borderColor="$outlineColor"
  borderRadius="$3"
  disableFocusScope
  disablePositioning {/* 禁用自动定位 */}
  style={{
    position: 'absolute',
    top: inputLayoutRef.current?.y + inputLayoutRef.current?.height + 4,
    left: inputLayoutRef.current?.x,
  }}
>
  {/* Popover内容 */}
</Popover.Content>

5. 控制Popover的层级归属

如果Dialog是模态类型，将Popover的portal属性设为false，让它留在Dialog的层级内，避免跨层级定位计算错误：

<Popover portal={false}>
  {/* 其余代码 */}
</Popover>

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