Come impostare dinamicamente l'altezza della vista in base alla larghezza mantenendo le proporzioni?

Question

Desidero avere una vista la cui larghezza sia sensibile alla larghezza del contenitore pur mantenendo le proporzioni. Non voglio larghezza o altezza del codice hard, ma tenerlo dinamico e reattivo in modo che possa essere riutilizzato in più situazioni come componente riutilizzabile.

spero che funziona in modo simile al seguente codice:

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

Si dovrebbe riempire la larghezza del suo contenitore e impostare la propria altezza in modo dinamico in base alla sua larghezza.

È possibile in nativa reattiva con il flexbox?

Answer 1

Come Hendy Irawan commentato, Reagire Native aggiunto aspectRatio proprietà StyleSheet.

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

Dal documento:

aspectRatio ?: numero

controllo Dimensioni delle dimensioni della dimensione indefinita di un nodo. Aspect Ratio è una proprietà non standard disponibile solo in reagire nativo e non in CSS.

Su un nodo con un controllo proporzioni larghezza impostata/altezza dimensioni del dimensione disinserito Su un nodo con un rapporto base aspetto flex impostare controlla la dimensione del nodo nell'asse trasversale se disinserito Su un nodo con a le proporzioni della funzione di misura funzionano come se la funzione di misurazione misurasse la base flessibile Su un nodo con proporzioni di accrescimento/riduzione flex controlla la dimensione del nodo sull'asse trasversale se disassato. Proporzioni prende dimensioni min/max in considerazione

Pertanto, quanto segue dovrebbe funzionare:

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

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

Answer 2

Sì, è possibile utilizzare Dimensions API per ottenere la larghezza della finestra, quindi impostare l'altezza in modo programmatico. In genere, le dimensioni vengono chiamate non appena l'app viene caricata, prima che sia necessario conoscere la larghezza e quindi passare semplicemente l'oggetto in base alle esigenze.

Questo potrebbe essere un componente personalizzato per realizzare il tuo caso d'uso.

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> 
) 
}