Jak zrealizować przycisk obrazu koła z reakcją natywną

Question

There. Kiedy próbowałem utworzyć element przycisku w kształcie koła z React Native. Ustawiam borderRadius na obrazie w połowie wartości jego wysokości i szerokości, aby wyglądał jak przycisk kółka i używał do niego gestu. W rezultacie, gdy wystukałem spoza okręgu, ale wewnątrz jakiegoś prostokątnego obszaru wokół widoku obrazu, zdarzenie wywołane przez zdarzenie, które jest nieoczekiwane.

po prostu nie mogę zrozumieć to:

Czy istnieje możliwość, aby określić obszar dotykowy Dotykowy * i jak? Czy system gestów obsługuje wykrywanie gestów określonych obszarów? Każda pomoc będzie doceniona!

Answer 1

Musisz zastosować stylizację w obszarze dotykowym, a także w obrazie, jeśli nie chcesz, aby zewnętrzna część obrazu była dotykalna.

Pierwszy obraz ma tylko obraz, który można dotykać, a drugi tylko style obraz, pozostawiając cały prostokąt dotykalny.

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

Answer 2

spróbuj tego:

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