Tengo un accesorio llamado isProfile que es usado por un componente (Feed) que usa la hoja de estilo a continuación. Quiero representar condicionalmente la altura del contenedor en función de si la propiedad isProfile está configurada como verdadera o falsa.
function Feed({isProfile}){ return( <View style={style.container}> </View> ) } const styles = StyleSheet.create({ container:{ backgroundColor:colors.primary, width:windowWidth, justifyContent:"center", height: isProfile ? windowHeight : windowHeight*0.87, },Así resolví mi problema.
Cambié mi código de hoja de estilo como tal
const styles = (isProfile) => StyleSheet.create({ container:{ backgroundColor:colors.primary, width:windowWidth, justifyContent:"center", height: isProfile ? windowHeight : windowHeight*0.87, }, )}Y luego pasé a prop a la styleSheet como tal
<View style={styles(isProfile).container}> </View>Debe cambiar los estilos a una función que acepte el parámetro:
function Feed({isProfile}){ return( <View style={createStyles(isProfile).container}> </View> ) } const createStyles = (profile) => StyleSheet.create({ container:{ backgroundColor:colors.primary, width:windowWidth, justifyContent:"center", height: profile ? windowHeight : windowHeight*0.87, }, La variable isProfile (prop) es local para el componente e invisible en el exterior, por lo que debe pasarse como parámetro
Puede almacenar varios estilos usando una matriz de objetos para style style={[{},{}]} etc. Esto le permite agregar la segunda parte que agregué
function Feed({isProfile}){ return( <View style={[style.container,{height: isProfile ? windowHeight : windowHeight*0.87,}]}> </View> ) } const styles = StyleSheet.create({ container:{ backgroundColor:colors.primary, width:windowWidth, justifyContent:"center", },