Cách nhận dạng nút hình tròn với phản ứng gốc

Question

Ở đó. Khi tôi cố gắng tạo thành một thành phần nút hình vòng tròn với React Native. Tôi đặt borderRadius của hình ảnh bằng một nửa giá trị chiều cao và chiều rộng của nó để làm cho nó trông giống như nút tròn và áp dụng phản hồi cử chỉ cho nó. Kết quả là khi tôi nhấn vào bên ngoài vòng tròn nhưng bên trong một số khu vực hình chữ nhật xung quanh Xem hình ảnh, sự kiện trả lời được gửi đi không mong muốn.

Tôi không thể hình dung ra:

Có khả năng xác định vùng cảm ứng của Touchable * và cách thực hiện không? Hệ thống trả lời cử chỉ có hỗ trợ phát hiện cử chỉ khu vực nhất định không? Bất kỳ trợ giúp sẽ được đánh giá cao!

Answer 1

Bạn cần áp dụng kiểu dáng cho vùng Có thể chạm cũng như hình ảnh nếu bạn không muốn bên ngoài hình ảnh có thể chạm được.

Hình ảnh đầu tiên chỉ có hình ảnh Có thể chạm được, trong khi hình ảnh thứ hai chỉ tạo kiểu cho hình ảnh, để toàn bộ hình chữ nhật có thể chạm được.

'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

thử điều này:

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