如何使react-native-elements工具提示大小根据其内容动态变化？

Question

React Native Elements Tooltip（此处的文档）要求您传入工具提示的width和height属性，但我想创建一个通用的工具提示按钮，可以接收任何元素作为其popoverprop。

以下示例是我所拥有的，但它使用 React Native Element 库为工具提示设置的默认大小：

import React from 'react'
import { Tooltip } from 'react-native-elements'
import styled from 'styled-components'

const Container = styled.View`
  justify-content: center;
  align-items: center;
  background-color: #aaf;
  height: 25px;
  width: 25px;
  border-radius: 12.5px;
`

const Icon = styled.Text``

export default function TooltipButton({ tooltip }) {
  return (
    <Tooltip popover={tooltip}>
      <Container>
        <Icon>?</Icon>
      </Container>
    </Tooltip>
  )
}

当内容大于默认大小时，它看起来像这样。

我不想将固定大小作为支柱传递给该组件，我希望它有一个取决于其内容的工具提示大小。

Answer 1

经过一段时间试图弄清楚这一点后，我设法做了一个自动调整大小的工具提示按钮，该按钮接收内容元素作为道具（工具提示）并根据其内容调整自身大小。

我让它正常工作的唯一方法是将初始尺寸设置为大于内容（500x500）并为其添加更多尺寸（+30）。

import React, { useState } from 'react'
import { Tooltip } from 'react-native-elements'
import styled from 'styled-components'

const Container = styled.View`
  justify-content: center;
  align-items: center;
  background-color: #aaf;
  height: 25px;
  width: 25px;
  border-radius: 12.5px;
`

const Icon = styled.Text``

export default function TooltipButton({ tooltip }) {
  const [tooltipSize, setTooltipSize] = useState({ w: 500, h: 500 })

  const tooltipClone = React.cloneElement(
    tooltip,
    { onLayout: (e) => setTooltipSize({ w: e.nativeEvent.layout.width, h: e.nativeEvent.layout.height }) }
  )

  return (
    <Tooltip 
      popover={tooltipClone} 
      width={tooltipSize.w + 30} 
      height={tooltipSize.h + 30}
    >
      <Container>
        <Icon>?</Icon>
      </Container>
    </Tooltip>
  )
}

最终结果看起来像这样。