2017-03-29 18 views
1

Ich habe eine einfache Fortschrittsbalken, es hat einen borderRadius und Überlauf auf hidden gesetzt. Ich habe ein Kind davon, es hat keinen RandRadius, und es ist über die Ecken überfließend. Hier ist mein Markup:Überlauf versteckt keine Auswirkungen haben

 <View style={style.progressbar}> 
      <View style={[style.progressbarfill, { width:'50%' }]} /> 
     </View> 



const style = { 
    progressbar: { 
     backgroundColor: '#ccc', 
     height: 25, 
     width: '90%', 
     borderRadius: 12, 
     overflow: 'hidden' 
    }, 
    progressbarfill: { 
     backgroundColor: 'springgreen', 
     width: '10%', 
     height: '100%' 
    } 
} 

Dies ist, wie es aussieht:

Ich habe Pfeile auf, wo das Grün die Grenze abdeckt. Das Grün sollte außerhalb der Kanten nicht überlaufen.

Weiß jemand, warum das ist?

Antwort

1

Eigentlich teste ich es gerade, scheint auf iOS gut zu funktionieren, aber Android ist derjenige, der das Problem mit dem Überlauf gerade jetzt hat. Es sieht so aus, als würde es immer noch mehr Unterstützung bekommen. Eine vorübergehende Lösung besteht darin, einfach den gleichen borderRadius in die progressbarfill einzufügen. Hier

ist das Problem auf die Reaktion Mutter Docs:

Die Überlaufstil Eigenschaft standardmäßig ausgeblendet und kann nicht auf Android geändert werden Dies ist ein Ergebnis davon, wie Android-Wiedergabe funktioniert. Diese Funktion wird nicht bearbeitet, da es eine bedeutende Verpflichtung wäre, und es gibt viel wichtigere Aufgaben.

Ein weiteres Problem mit Überlauf: ‚versteckt‘ auf Android: eine Ansicht wird nicht durch die borderRadius der Eltern abgeschnitten, auch wenn die übergeordneten Überlauf hat: ‚versteckt‘ aktiviert - die Ecken der Innenansicht werden sichtbar außerhalb die abgerundeten Ecken. Dies gilt nur für Android. es funktioniert als erwartet auf iOS. Siehe die corresponding issue.

+0

Ooo vielen Dank Taylor dafür. Ist das, wo Sie darüber lesen - https://facebook.github.io/react-native/releases/0.26/docs/known-issues.html#the-overflow-style-property-defaults-to-hidden-and- kann nicht geändert werden-auf-Android? – Noitidart

+1

Ja! Kein Problem. Ich habe ein wenig mehr für neuere Versionen recherchiert, Sie könnten Ihre Version auf React native überprüfen und sehen, ob diese Versionshinweise für Sie gelten. Ich weiß, dass diese ein wenig veraltet sind, aber ich konnte keine neueren Veröffentlichungen finden, die das behoben haben, aber vielleicht? Ich habe 0,42 und ich habe immer noch dieses Problem ... also, wenn Sie es lösen! Gib mir Bescheid! @Noitidart –

+0

Danke für diese Notiz werde ich Ihnen sicher wissen lassen. Ich bin auch auf 0.42 :) – Noitidart

Verwandte Themen