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

Question

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

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

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

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

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

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

最终结果看起来像this。

Answer 2

我想在宽度和高度上增加20个单位就足够了。这是必需的，因为应用于工具提示组件的默认样式会添加10的填充，请参见here。