phản ứng gốc: borderRadius không khung thành phần bên phải

Question

Thuộc tính kiểu borderRadius không thay đổi đường viền của thành phần một cách chính xác.

Tôi hy vọng sẽ thấy một vòng tròn màu xanh lá cây trên nền đỏ mà không có bất kỳ khoảng trắng nào. Thay vào đó, tôi thấy điều này.

class Healthie extends React.Component { 
    render() { 
    return (
     <View style={styles.container}> 
     <Text style={styles.button} /> 
     </View> 
    ); 
    } 
}; 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: 'red', 
    }, 
    button: { 
    backgroundColor: 'green', 
    borderRadius: 50, 
    width: 100, 
    height: 100, 
    textAlign: 'center' 
    } 
}); 

phản ứng bản địa phiên bản: 0.17.0.

Answer 1

Để có được những gì bạn đang tìm kiếm, bạn sẽ phải gói hộp văn bản bên trong Chế độ xem khác. The View sẽ không mặc định khác màu BG khi borderRadius được thay đổi:

<View style={styles.container}> 
    <View style={styles.button}> 
    <Text style={{ backgroundColor: 'transparent' }}>Text</Text> 
    </View> 
</View> 

const styles = StyleSheet.create({ 
    container: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: 'red', 
    }, 
    button: { 
    backgroundColor: 'green', 
    borderRadius: 50, 
    width: 100, 
    height: 100, 
    textAlign: 'center', 
    flexDirection:'row', 
    alignItems:'center', 
    justifyContent:'center' 
    } 
}); 

Check-out this demo.

Answer 2

không cần nút hoặc văn bản bên trong quan điểm để bọc, chỉ cần đặt này trên phong cách của bạn

overflow: hidden 

nó làm việc cho tôi