Absoluto e Flexbox no Reat Native
Eu gostaria de colocar uma barra branca que levaria toda a largura na parte inferior do ecrã. Para isso, pensei em usar
absolute
posicionamento com os parâmetros herdados flexbox
.
com o código a seguir torna algo como isto .
Aqui está o meu código:var NavigationBar = React.createClass({
render: function() {
return(
<View style={navigationBarStyles.navigationBar}>
//Icon 1, Icon 2...
</View>
);
}
});
var Main = React.createClass({
render: function() {
return(
<View style={mainStyles.container}>
<NavigationBar />
</View>
);
}
});
var mainStyles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#456783',
}
});
var navigationBarStyles = StyleSheet.create({
navigationBar: {
backgroundColor: '#FFFFFF',
height: 30,
position: 'absolute',
flexDirection: 'row',
bottom: 0,
justifyContent: 'space-between'
},
});
Sou novo em estilo em CSS e nem todas as propriedades estão disponíveis Em Reat-Native. Assim, qualquer ajuda é apreciada, obrigado:)
56
3 answers
OK, resolvi o meu problema, se alguém passar por aqui é a resposta:
Tive de adicionar left: 0,
e top: 0,
aos estilos, e sim, estou cansado.
position: 'absolute',
left: 0,
top: 0,
100
Author: ilansas, 2016-02-22 00:37:28
O primeiro passo seria adicionar
position: 'absolute',
Então se quiser o elemento largura completa, adicione
left: 0,
right: 0,
Então, se quiser colocar o elemento no fundo, adicione
bottom: 0,
// don't need set top: 0
Se quiser posicionar o elemento no topo, substitua bottom: 0
por top: 0
39
Author: Spark.Bao, 2017-11-16 12:19:44
Esta solução funcionou comigo.
tabBarOptions: {
showIcon: true,
showLabel: false,
style: {
backgroundColor: '#000',
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
position: 'relative',
zIndex: 2,
marginTop: -48
}
}
0
Author: Alex, 2017-11-29 18:39:14