如何实现一个反应原生的圆形图像按钮

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

如果您不希望图像的外部可触摸,则需要将样式应用于"可触摸"区域以及图像.

第一个图像只有图像Touchable,而第二个图像只对图像进行样式化,使整个矩形可以触摸.

'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);