0
I am trying to add a product value bar at the bottom of the application, using the justifyContent: 'flex-end' but the content does not go down, it is pasted in the View that comes above. The code is this
const ItemDetalhe = props => {
return (
<View style={estilos.conteudo}>
<View style={{ flexDirection: 'column'}}>
<View style={{ alignItems: 'center' }}>
<Image style={estilos.fotoCabecalho} source={{ uri: props.fotoProduto }} />
</View>
<View style={{ alignItems: 'center' }}>
<Text style={estilos.txtTitulo}>{props.tituloProduto}</Text>
</View>
<View style={{ alignItems: 'center' }}>
<Text style={estilos.txtDescricao}>{props.descricaoProduto}</Text>
</View>
// ---->> Estou tentando jogar essa view para a parte mais baixa da aplicação
<View style={estilos.containerValor}>
<Text style={estilos.txtValor}>R${props.valorProduto}</Text>
</View>
</View>
</View>
);
}
const estilos = StyleSheet.create({
conteudo: {
backgroundColor: 'white',
flex: 1
},
fotoCabecalho: {
height: 200,
width: 200,
},
txtTitulo: {
fontSize: 30,
color: 'black',
fontWeight: 'bold',
textAlign: 'center'
},
txtDescricao: {
fontSize: 20,
color: 'black',
textAlign: 'center'
},
txtValor: {
color: 'white',
fontSize: 40
},
containerValor: {
backgroundColor: 'steelblue',
alignItems: 'center',
flexDirection: 'column',
justifyContent: 'flex-end',
}
});
The stretch I’m trying to get down is what the container contains
Renan was not the one who gave the negative. But I’ll give you a hint! Put the already rendered code in the browser. Then open the view in the browser and give a Ctrl+U to get the already compiled code in the browser. It’s easier for someone to help you. If possible put the CSS normal too and not as you put it. This will take the chance of someone helping you. 'Cause the way it is, most of you here won’t be able to fake the problem you’re having
– hugocsl
I believe the application he refers to is a React-Native app. @Renan Bicudo Ferrari could confirm?
– sant0will