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

Question

[React Native Elements要求您传递工具提示的width和height属性，但是我想创建一个通用的工具提示按钮，它可以接收任何元素作为其popover属性。

以下示例是我所拥有的，但是它使用了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``
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>
  )
}