React-natywny: borderRadius nie kwalifikuje komponentu prawnie

Question

Atrybut stylu borderRadius nie zmienia prawidłowo obramowania komponentu.

Spodziewam się zobaczyć zielone kółko na czerwonym tle bez białych znaków. Zamiast tego widzę to.

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

reakcji natywną wersję: 0.17.0.

Answer 1

Aby uzyskać to, czego szukasz, będziesz musiał owinąć pole tekstowe wewnątrz innego widoku. Widok nie będzie domyślnie na inny kolor BG gdy borderRadius ulega zmianie:

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

odjazdu this demo.

Answer 2

ma potrzeby przycisk lub tekst wewnątrz poglądów zawijać, wystarczy umieścić to w swoim stylu

overflow: hidden 

to działa na mnie