View auto height
Publicado por Victorio (11 intervenciones) el 01/06/2020 00:52:46
Hola, estoy haciendo un cropper para recortar fotos, y segun tengo en mente, en el medio habrá una vista sin opacidad manipulable, con una altura determinada y escalable, y en el header y bottom voy a tener unas vistas con un blur. Pues lo que quiero es que las vistas de arriba y abajo (las del blur) adapten su altura en función de la del medio. Por ejemplo, si la del medio (la no opaca) mide 400px, y la pantalla tiene 600px, pues los de arriba y abajo tendran una altura 100. En cambio, si la del medio cambia a 500, tendrán 50, y así sucesivamente.
Por aquí les dejo el código que tengo (es en react native pero básicamente mi problema está en los estilos)
Por aquí les dejo el código que tengo (es en react native pero básicamente mi problema está en los estilos)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
import React, { useState } from "react";
import { View, Image, Dimensions, Platform, StyleSheet } from "react-native";
import { BlurView } from "expo-blur";
import { useTheme } from "react-native-paper";
const WINDOW_WIDTH = Dimensions.get("window").width;
const WINDOW_HEIGHT = Dimensions.get("window").height;
export default function Cropper({ photo }) {
const { colors } = useTheme();
const [height, setHeight] = useState(WINDOW_HEIGHT / 2);
return (<View style={styles.container}>
<BlurView intensity={100} style={{ flex: 1 }} />
<View style={[styles.cropper, { height: height }]} />
<BlurView intensity={100} style={{ flex: 1 }} />
</View>
);}const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
alignItems: "flex-start",
backgroundColor: "red",
},
cropper: {
width: "100%",
},
});
Valora esta pregunta
0
