如何用react native实现圆形图片按钮 [英] How to realize a circle image button with react native

问题描述

那里.当我尝试使用 React Native 制作圆形按钮组件时.我将图像的 borderRadius 设置为其高度和宽度值的一半，使其看起来像圆形按钮并对其应用手势响应器.因此，当我在圆形外部但在图像视图周围的一些矩形区域内轻敲时，调度了意外的响应者事件.

There. When I was trying to make a circle shaped button component with React Native. I set the borderRadius of an Image half the value of its height and width to make it looks like the circle button and apply gesture responder to it.As a result when i tapped outside the circle but inside some rectangular area around the Image view, the responder event dispatched which is unexpected.

我就是想不通:

是否有可能确定 Touchable* 的触摸区域以及如何确定?手势响应系统是否支持特定区域的手势检测?任何帮助将不胜感激！

Is there any possibility to determine the touch area of Touchable* and how? Does the gesture responder system support certain area gesture detection? Any help would be appreciated!

推荐答案

试试这个:

 <TouchableOpacity
   style={{
       borderWidth:1,
       borderColor:'rgba(0,0,0,0.2)',
       alignItems:'center',
       justifyContent:'center',
       width:100,
       height:100,
       backgroundColor:'#fff',
       borderRadius:50,
     }}
 >
   <Icon name={"chevron-right"}  size={30} color="#01a699" />
 </TouchableOpacity>

这篇关于如何用react native实现圆形图片按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！