Как реализовать кнопку изображения круга с ответом на родной

Там. Когда я пытался создать круглую форму с компонентом React Native. Я установил borderRadius изображения наполовину значение его высоты и ширины, чтобы оно выглядело как кнопка круга и применило к нему ответ жестов. В результате, когда я постучал за пределы круга, но внутри некоторой прямоугольной области вокруг изображения, событие ответчика, которое неожиданно.

Я просто не могу понять:

Есть ли возможность определить зону касания Touchable * и как? Поддерживает ли система респондера жестов определенное определение жестов области? Любая помощь будет оценена!

Ответ 1

попробуйте следующее:

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

Ответ 2

Вам нужно применить стиль к области Touchable, а также к изображению, если вы не хотите, чтобы внешняя сторона изображения была осязаемой.

Первое изображение имеет только изображение 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);