Jak dynamicznie ustawić wysokość widoku na podstawie jego szerokości, zachowując proporcje?

Question

Chcę mieć widok, którego szerokość reaguje na szerokość kontenera, zachowując proporcje. Nie chcę sztywnego kodu szerokości ani wysokości, ale zachowuj go dynamicznie i elastycznie, aby mógł być ponownie użyty w wielu sytuacjach jako składnik wielokrotnego użytku.

Mam nadzieję, że działa podobnie do następującego kodu:

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

Należy wypełnić szerokość jego pojemnik i ustawić własną wysokość dynamicznie na podstawie jego szerokości.

Czy jest to możliwe w reakcji na działanie fleksograficzne?

Answer 1

Jak skomentował Hendy Irawan, React Native dodany aspectRatio właściwość StyleSheet.

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

Z dokumentu:

aspectRatio ?: numer

Proporcje kontrola wielkość nieokreślonym wymiarze węzła. Współczynnik proporcji jest niestandardową właściwością dostępną tylko w trybie macierzystym , a nie w CSS.

Na węźle kontroli formatu obrazu zestaw szerokość/wysokość wielkość wyłączonym wymiar w węźle z zestawem elastycznego stosunku podstawę obrazu steruje rozmiar węzła w osi przekroju czy wyłączony Na węźle Współczynnik proporcji funkcji pomiaru działa tak, jak gdyby funkcja pomiaru mierzy podstawę elastyczną W węźle ze współczynnikiem wydłużenia/zmniejszenia obrazu steruje rozmiarem węzła w osi poprzecznej, jeśli nie jest ustawiony współczynnik proporcji uwzględnia wymiary min./maks.

Dlatego powinny działać następujące elementy:

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

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

Answer 2

Tak, można użyć parametru Dimensions API, aby uzyskać szerokość okna, a następnie ustawić wysokość programowo. Zwykle wywołuję wymiary zaraz po załadowaniu aplikacji, zanim trzeba będzie znać szerokość, a następnie po prostu przekazać obiekt w razie potrzeby.

Może to być niestandardowy komponent do wykonania Twojego przypadku użycia.

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