react-native - instalar - react native example

Cómo realizar un botón de imagen circular con reaccionar nativo.

Question

Ahí. Cuando intentaba hacer un componente de botón en forma de círculo con React Native. Configuré el borde de una imagen con la mitad del valor de su altura y anchura para que se vea como el botón circular y le aplique el respondedor de gestos. evento respondido despachado que es inesperado.

Simplemente no puedo entenderlo:

¿Hay alguna posibilidad de determinar el área táctil de Touchable * y cómo? ¿El sistema de respuesta de gestos admite cierta detección de gestos de área? ¡Cualquier ayuda sería apreciada!

Answer 1

Debe aplicar un estilo al área táctil, así como a la imagen, si no desea que se pueda tocar el exterior de la imagen.

La primera imagen solo tiene la imagen táctil, mientras que la segunda solo da estilo a la imagen, dejando todo el rectángulo táctil.

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

prueba esto:

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