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

76

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

Ich habe ein modales Fenster

http://f1.s.qip.ru/etSMz5YP.png

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
3
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
7
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
3
Ja, ich habe es versucht, hatte aber keine Wirkung.
Maksim
1
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
7
funktioniert bei mir auch unter IOS nicht. nur borderRadiusarbeiten , sondern mit einem Radius in alle Ecken gelten
Kevin Amiranoff
8
@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
15
Versuchen Sie es overflow:hiddenmit Ihrer Ansicht (oder Ihrem Text). Es sollte funktionieren.
Harkirat Saluja
19

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
10

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