0
157
ViewsReact Native: la vista no cubre la altura de los padres
Tema
Hay 2 pestañas apiladas horizontalmente y en la primera pestaña, la vista en color verde no puede llenar la altura de los padres cuando el contenido es diferente en ambas pestañas .
Reproducible en Expo
https://snack.expo.dev/@vinay-sharma/92706e
Código
import React from "react"; import { Text, View } from "react-native"; const Tab = ({ textNodes }) => { return ( <View style={{ flex: 1, backgroundColor: "red" }}> <View style={{ flexDirection: "row" }}> <View style={{ backgroundColor: "blue", width: 10 }}></View> {/* the green view isn't able to fill parent's height*/} <View style={{ backgroundColor: "green", flex: 1 }}> {textNodes.map((node) => ( <Text>{node}</Text> ))} </View> </View> <View style={{ height: 10, backgroundColor: "black" }} /> </View> ); }; export default function App() { return ( <View style={{ flexDirection: "row", marginTop: 25 }}> <Tab textNodes={[1, 2, 3]} /> <Tab textNodes={[1, 2, 3, 4]} /> </View> ); }
·
Juan Pablo Isaza
1 answers
Answer question0
Simplemente agregue la altura de la propiedad de style height: '100%' en la vista de row en su función Tab()
El primer elemento no toma el 100% de la altura porque tiene menos Childs (comportamiento predeterminado de View , doc )
import React from 'react'; import { Text, View } from 'react-native'; const Tab = ({ textNodes }) => { return ( <View style={{ flex: 1, backgroundColor: 'red' }}> <View style={{ flexDirection: 'row', height: '100%' }}> //here add height 100% <View style={{ backgroundColor: 'blue', width: 10 }}></View> {/* the green view isn't able to fill parent's height*/} <View style={{ backgroundColor: 'green', flex: 1 }}> {textNodes.map((node)=><Text>{node}</Text>)} </View> </View> <View style={{ height: 10, backgroundColor: "black" }} /> </View> ) } export default function App() { return ( <View style={{ flexDirection: 'row', marginTop: 25 }}> <Tab textNodes={[1, 2, 3]} /> <Tab textNodes={[1, 2, 3, 4]} /> </View> ); }
·
Juan Pablo Isaza
Report
Answer question