Wie verwende ich den Randradius nur für eine Ecke (reaktionsnativ)?

Wie verwende ich den Randradius in React Native nur für eine Ecke?

Ich habe ein modales Fenster

Wie Sie sehen können, sind die unteren Ecken nicht abgerundet. Dies passiert, wenn ich backgroundColor für Schaltflächen verwendet habe. Ich habe versucht, den Überlauf für den Modal Wrapper zu verbergen, und es hat mir nicht geholfen. Jetzt möchte ich den Rahmenradius für Schaltflächen verwenden (nur für 1 Ecke).

Mein Code http://jsbin.com/sexeputuqe/edit?html,css

javascript reactjs react-native

— Maksim
quelle

Ich weiß nicht über Reaktionen, aber Sie können die border-top/bottom-left/right-radiusCSS-Eigenschaft (z. B. border-bottom-right-radius: 5px) verwenden

— Yoplaboom

Großes UI-Problem: "Durch Drücken von Abbrechen wird XYZ", aber es gibt keine Schaltfläche zum Abbrechen. Außerdem scheint "Ja" einer destruktiven Aktion zu entsprechen. Ich empfehle dringend, die Schaltflächenbeschriftungen in "Verwerfen" (sollte sich auch links befinden) und "Behalten" zu ändern.

— Niet the Dark Absol

Können Sie Ihren Code und Ihr Styling für das Element freigeben? Ich glaube, ich weiß vielleicht, was hier passiert. Vielen Dank.

— Nader Dabit

Mein Code jsbin.com/sexeputuqe/edit?html,css

— Maksim

Entschuldigen Sie, aber damit Sie den gewünschten Effekt erzielen, können Sie ihn overflow: 'hidden'in der übergeordneten Ansicht der Schaltflächen verwenden

— Vincent Joy,

Antworten:

253

Haben Sie bereits Folgendes versucht?
- borderBottomLeftRadius: Nummer
- borderBottomRightRadius: Nummer
- borderTopLeftRadius: Nummer
- borderTopRightRadius: Nummer

Weitere Informationen finden Sie auch in den Dokumenten der Ansichtskomponente .

— Matteo Mazzarolo
quelle

Ja, ich habe es versucht, hatte aber keine Wirkung.

— Maksim

Wenn sich in Ihrem Beispiel die beiden Schaltflächen im Fragenfeld befinden, müssen Sie den Rahmenradius für die Schaltfläche und den Container festlegen. Wenn nicht, sollten Sie borderBottomLeftRadius und borderBottomRightRadius verwenden. So etwas wie borderBottomLeftRadius: 5auf die Schaltfläche Nein undborderBottomRightRadius: 5 auf der Ja-Taste. Wenn dies nicht funktioniert, geben Sie uns möglicherweise ein Beispiel Ihres Codes, damit wir überprüfen können, ob nichts anderes stört.

— G. Hamaide

funktioniert bei mir auch unter IOS nicht. nur borderRadiusarbeiten , sondern mit einem Radius in alle Ecken gelten

— Kevin Amiranoff

@kevin Die iOS-Version der ImageKomponente ignoriert eckenspezifische Radiuseinstellungen . Sie können einen negativen Rand verwenden, um die Ecken zu "maskieren", die in einigen Fällen nicht gerundet werden sollen.

— Josh

Versuchen Sie es overflow:hiddenmit Ihrer Ansicht (oder Ihrem Text). Es sollte funktionieren.

— Harkirat Saluja

Fügen Sie Ihrem Stil die folgenden Eigenschaften hinzu:

borderBottomLeftRadius: number
borderBottomRightRadius: number
borderTopLeftRadius: number
borderTopRightRadius: number

Das hat bei mir funktioniert.

Vielen Dank

— Syn Adhitya
quelle

Fügen Sie der Antwort weitere Erklärungen hinzu.

— Vivek Kumar

@ DanielJosePadillaPeña, hast du eine Lösung gefunden?

— Manspof

Hardcodierung, Hinzufügen eines weiteren Bildes ohne Ecke, Ausblenden des Radius. Ist kein guter Weg aber trotzdem eine andere Lösung gefunden.

— Daniel Jose Padilla Peña

Es funktioniert für mich, als ich Überlauf hinzugefügt habe: "verstecktes" Eigentum

— Piotr Badura

Angenommen, nur der Radius wird für die obere linke und untere linke Ecke des Bild-Tags festgelegt.

<View style={styles.imgBox}>
  <Image source={{ uri: 'your image url' }} style={styles.img} />
</View>

 const styles = EStyleSheet.create({
 imgBox: {
       width: px(72),
       height: px(72),
       borderBottomLeftRadius: 2,
       borderTopLeftRadius: 2,
       overflow: 'hidden',
 },
 img: {
       width: px(72),
       height: px(72),
  },
})

sieht gut aus für ios.

— Shirly Chen
quelle

unvollständig - können Sie bitte die erforderlichen npm-Pakete und fehlenden importAnweisungen hinzufügen ?

— SSC