react native如何实现圆形图片按钮

Question

那里。 当我试图用 React Native 制作一个圆形按钮组件时。我将图像的borderRadius 设置为其高度和宽度值的一半，使其看起来像圆形按钮并对其应用手势响应器。结果，当我在圆圈外部但在图像视图周围的某个矩形区域内点击时，调度的响应者事件是意外的。

我就是想不通：

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

Answer 1

试试这个：

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

Answer 2

如果您不希望图像的外部可触摸，则需要对可触摸区域和图像应用样式。

第一个图像只有可触摸的图像，而第二个图像只有样式，使整个矩形可触摸。

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
  TouchableHighlight
} = React;

var SampleApp = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
       <Text style={{ fontSize:22 }}>Only image clickable</Text>
       <TouchableHighlight style={ styles.imageContainer }>
            <Image style={ styles.image } source={{ uri: 'http://www.free-avatars.com/data/media/37/cat_avatar_0597.jpg' }} />
       </TouchableHighlight> 
       <Text style={{ fontSize:22 }}>Entire Row Clickable</Text>
       <TouchableHighlight style={ styles.imageContainer2 }>
            <Image style={ styles.image } source={{ uri: 'http://www.free-avatars.com/data/media/37/cat_avatar_0597.jpg' }} />
       </TouchableHighlight> 
      </View>  
    );
  }
}); 

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:60
  },
  imageContainer: {
    height:128,
    width: 128,
    borderRadius: 64
  },
  image: {
    height:128,
    width: 128,
    borderRadius: 64
  },
  imageContainer2: {

  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);