javascript - column - Absoluta y Flexbox en React Native

react native flexbox grid

Question

Me gustaría poner una barra blanca que tomaría todo el ancho en la parte inferior de la pantalla. Para hacerlo, pensé en usar absolute posicionamiento absolute con los parámetros heredados de flexbox .

Con el siguiente código, representa algo como this .

Aquí está mi 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''
},
});

Soy nuevo en estilo en CSS y no todas las propiedades están disponibles en React-Native. Así que cualquier ayuda es apreciada, gracias :)

Answer 1

El primer paso sería agregar

position: ''absolute'',

entonces si quieres el elemento de ancho completo, agrega

left: 0,
right: 0,

luego, si desea colocar el elemento en la parte inferior, agregue

bottom: 0,
// don''t need set top: 0

si desea colocar el elemento en la parte superior, reemplace bottom: 0 por top: 0

Answer 2

Esta solución funcionó para mí:

tabBarOptions: {
showIcon: true,
showLabel: false,
style: {
backgroundColor: ''#000'',
borderTopLeftRadius: 40,
borderTopRightRadius: 40,
position: ''relative'',
zIndex: 2,
marginTop: -48
}
}

Answer 3

Ok, resolvió mi problema, si alguien pasa por aquí es la respuesta:

Solo tenía que agregar left: 0, y top: 0, a los estilos, y sí, estoy cansado.

position: ''absolute'',
left: 0,
top: 0,