Tengo el siguiente código:
import React from "react"; import { StyleSheet, View } from "react-native"; function App() { return ( <View style={styles.container}> <View style={styles.row_1}> <View style={styles.square} /> </View> <View style={styles.row_2}> <View style={styles.square} /> </View> </View> ); } const styles = StyleSheet.create({ container: { flex: 1 }, row_1: { flex: 1, backgroundColor: "red", alignItems: "center", padding: 10 }, row_2: { flex: 5, backgroundColor: "blue", alignItems: "center", //flexDirection: 'row', padding: 10 }, square: { flex: 1, aspectRatio: 1, backgroundColor: "white" } }); export default App;Estoy tratando de insertar un cuadrado blanco en el centro de las filas, sin saber a priori la altura y el ancho de las filas. En el ejemplo, en un teléfono 4:3, la primera fila es más grande que más alta y la segunda fila más alta que más grande.
El cuadrado de la primera fila es correcto, pero el cuadrado de la segunda fila excede los márgenes. Puedo configurar manualmente flexDirection: 'fila' en fila_2 para lograr el resultado esperado, pero solo porque sé que el contenedor es más alto que más grande. ¿Cómo puedo lograr el mismo resultado, sin especificar la dirección de flexión?
Caja de arena aquí
No estoy exactamente seguro de cuál es el resultado final que está buscando, pero para algo que responda como esto, consideraría usar una unidad dinámica en las propiedades de ancho/alto en sus cuadrados como unidades de ventana gráfica: vw, vh, vmin, vmax.
Alternativamente, puede obtener las dimensiones de la ventana gráfica en píxeles:
//eg document.documentElement.clientWidth document.documentElement.clientHeight //or including scrollbar: window.innerWidth window.innerWidthLuego use una biblioteca de estilos CSS como emoción , use las dimensiones de la ventana gráfica en sus estilos.