1

我正在开发 [Tooltip][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>

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

谢谢

4

1 回答 1

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属性以增加可触摸的视图区域，它是通过高度和填充增加可触摸区域的替代方法

于 2019-11-13T06:34:43.523 回答