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

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

2 个答案: