Wie wird die Höhe der Ansicht basierend auf ihrer Breite dynamisch festgelegt, indem das Seitenverhältnis beibehalten wird?

Question

Ich möchte eine Ansicht haben, deren Breite auf die Breite des Containers reagiert, während das Seitenverhältnis beibehalten wird. Ich möchte Breite oder Höhe nicht hart codieren, sondern dynamisch und reaktionsfähig halten, damit es in mehreren Situationen als wiederverwendbare Komponente wiederverwendet werden kann.

Ich hoffe, es funktioniert ähnlich wie dem folgenden Code:

<View style={{ 
    alignSelf: 'stretch', 
    aspectRatio: 1.5 
}} /> 

Es sollte sein Behälter Breite füllen und legen Sie seine eigene Höhe dynamisch auf der Basis seiner Breite.

Ist dies in reactive-native mit Flexbox möglich?

Answer 1

Als Hendy Irawan kommentierte: Reagieren india aspectRatio Eigenschaft StyleSheet hinzugefügt.

https://facebook.github.io/react-native/docs/layout-props.html#aspectratio

Aus dem Dokument:

aspectratio ?: Anzahl

Seitenverhältnis Steuerung der Größe der undefinierten Dimension eines Knotens. Das Seitenverhältnis ist eine nicht standardmäßige Eigenschaft, die nur in der reaktiven nativen und nicht in CSS verfügbar ist.

auf einem Knoten mit einer Satz Breite/Höhe-Seitenverhältnis Steuerung der Größe der ungesetzt Dimension eines Knoten mit einem Satz flex Verhältnisbasis Aspekte steuert die Größe des Knotens in der Querachse, wenn ungesetzt auf einem Knoten mit Ein Messfunktions-Seitenverhältnis funktioniert, als ob die Messfunktion die Flex-Basis misst. Auf einem Knoten mit Flex-Grow/Shrink-Seitenverhältnis steuert die Größe des Knotens in der Querachse, wenn nicht festgelegt. Das Seitenverhältnis berücksichtigt Min/Max-Dimensionen

So sollte folgendes funktionieren:

const styles = StyleSheet.create({ 
    view: { 
    aspectRatio: 1.5, 
    } 
}); 

// later in render() 
<View style={styles.view} /> 

Answer 2

Ja, Sie können die Dimensions API verwenden, um die Breite des Fensters zu erhalten, und dann die Höhe programmatisch festlegen. Normalerweise rufe ich die Dimensionen auf, sobald die App geladen wird, bevor Sie die Breite kennen müssen, und lassen Sie das Objekt dann einfach nach Bedarf passieren.

Dies könnte eine benutzerdefinierte Komponente sein, um Ihren Anwendungsfall zu erreichen.

import {Dimensions} from 'react-native' 

... 

const AspectView = ({style, aspectRatio, children, ...props}) => { 
    let {height, width} = Dimensions.get('window'); 
    return (
    <View style={[style, {height: width * aspectRatio}] {...props}>{children}</View> 
) 
}