reagieren-native: borderRadius nicht Rahmenteil rechts

Den borderRadius style-Attribut nicht ändern, dass die Grenze einer Komponente korrekt.

Ich würde erwarten, um zu sehen, ein grüner Kreis auf dem roten hintergrund, ohne Leerzeichen. Stattdessen sehe ich diese.

reagieren-native: borderRadius nicht Rahmenteil rechts

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

reagieren-native version: 0.17.0.

InformationsquelleAutor Mike Borozdin | 2016-01-12
  1. 6

    Zu bekommen, was Sie suchen, sind Sie gehen zu müssen, wickeln Sie das Textfeld in eine andere Ansicht. Die Ansicht wird nicht standardmäßig eine andere BG-Farbe, wenn die borderRadius geändert:

    <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 diese demo.

    • Es hat geklappt! Danke! Auch ohne {{ backgroundColor: 'transparent' }}.
    InformationsquelleAutor Nader Dabit
  2. 5

    keine Notwendigkeit, wrap button oder text in Aussicht, nur setzen Sie diese auf Ihren Stil

    overflow: hidden

    es funktioniert für mich

    • Das funktioniert auf ios, aber nicht auf android. Zumindest als von RN 0.25. Die richtige Antwort ist die akzeptierte Antwort.
    InformationsquelleAutor yfsx
Schreibe einen Kommentar