使用图标和 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>

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

谢谢

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

使用图标和 TouchableHighlight 反应本机工具提示？

React Native Tooltip with Icon and TouchableHighlight?

javascript

react-native

tooltip

jsx

touchablehighlight