Überlauf versteckt keine Auswirkungen haben

Question

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:

 <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?

Answer 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.