用 Icon 和 TouchableHighlight 反应原生工具提示？

Question

我正在开发一个[工具提示][1]，用户可以点击查看说明。看起来像这样

<Tooltip popover={<Text>my explanation</Text>} backgroundColor={'rgb(255, 179, 16)'}>
   <Text>?</Text>
</Tooltip>

这样做的问题是用户需要点击确切的文本顶部才能工作，我想在它周围创建一个不可见的框，用户可以点击它里面的任何地方来触发它。

<TouchableHighlight>
   <View style={{height: 48, alignSelf: 'stretch', justifyContent: 'center', backgroundColor: '#2196F3'}}>
     <Tooltip popover={<Text>my explanation</Text>} backgroundColor={'rgb(240, 179, 16)'}>
       <Text>?</Text>
     </Tooltip>
   </View>
</TouchableHighlight>

也试过了

 <Tooltip popover={<Text>my explanation</Text>} backgroundColor={'rgb(240, 179, 16)'}>
     <Icon.Button name="help-circle"
         backgroundColor="##3b5998"
         borderColor="##3b5998"
         color="##3b5998">
     </Icon.Button>
 </Tooltip>

但这两个都不起作用。任何人都可以就我的代码有什么问题以及如何修复它提出建议。 另外，当我需要文本可点击并且我想将可点击区域扩展到比文本本身更大的区域时，我应该如何处理文本的任何建议。

谢谢

Answer 1

试试这个

     <Tooltip popover={<Text>my explanation</Text>} backgroundColor={'rgb(240, 179, 16)'}>
      <View style={{ height: 48, alignSelf: 'stretch', justifyContent: 'center', backgroundColor: '#2196F3' }}>
        <Text>?</Text>
      </View>
    </Tooltip>

基本上你必须将元素包裹在工具提示中 另请查看 View 的 hitslop 属性以增加可触摸的视图区域，它是通过高度和填充增加可触摸区域的替代方法