web-dev-qa-db-fra.com

Comment réaliser un bouton d'image de cercle avec react native

Là. Lorsque j'essayais de créer un composant de bouton en forme de cercle avec React Native. Je règle le borderRadius d'une image à la moitié de sa hauteur et de sa largeur, afin qu'il ressemble au bouton du cercle et que vous appliquiez un geste En conséquence, lorsque j'ai tapé à l'extérieur du cercle mais à l'intérieur d'une zone rectangulaire autour de la vue Image, l'événement répondeur a été distribué, ce qui est inattendu.

Je n'arrive pas à comprendre:

Est-il possible de déterminer la zone tactile de Touchable * et comment? Le système de répondeur gestuel prend-il en charge la détection de certains mouvements de zone? Toute aide serait appréciée!

react-native
31
Alrightlook

essaye ça:

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

Vous devez appliquer un style à la zone palpable ainsi qu’à l’image si vous ne souhaitez pas que l’extérieur de l’image soit palpable.

La première image n'a que l'image Touchable, tandis que la seconde ne donne qu'un style à l'image, ce qui permet de toucher l'ensemble du rectangle.

'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);
18
Nader Dabit