प्रतिक्रिया-मूल: सीमा त्रिज्या घटक फ्रेम नहीं करता

Question

borderRadius शैली विशेषता किसी घटक की सीमा को सही ढंग से नहीं बदलती है।

मैं किसी भी सफेद स्थान के बिना लाल पृष्ठभूमि पर एक हरा चक्र देखने की उम्मीद करता हूं। इसके बजाय, मैं इसे देखता हूं।

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

प्रतिक्रिया देशी संस्करण: 0.17.0।

Answer 1

जो आप ढूंढ रहे हैं उसे पाने के लिए, आपको टेक्स्ट बॉक्स को किसी अन्य दृश्य में लपेटना होगा। देखें एक और बीजी रंग के लिए डिफ़ॉल्ट नहीं होगा जब borderRadius बदल गई है:

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

बाहर चेक this डेमो।

Answer 2

बटन या विचारों के अंदर का पाठ रैप करने के लिए कोई जरूरत नहीं है, बस अपनी शैली पर इस डाल

overflow: hidden 

यह मेरे लिए काम करता