Me gustaría poner una barra blanca que ocuparía todo el ancho en la parte inferior de la pantalla. Para hacerlo, pensé en usar el posicionamiento absolute con los parámetros heredados flexbox .
Con el siguiente código se renderiza algo como esto .
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 el diseño de CSS y no todas las propiedades están disponibles en React-Native. Así que cualquier ayuda es apreciada, gracias :)
Ok, resolvi mi problema, si alguien esta pasando aqui esta la respuesta:
Solo tenía que agregarle left: 0, y top: 0, a los estilos, y sí, estoy cansado.
position: 'absolute', left: 0, top: 0,El primer paso sería agregar
position: 'absolute',luego, si desea que el elemento tenga el ancho completo, agregue
left: 0, right: 0,luego, si desea poner 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
Esta solución funcionó para mí:
tabBarOptions: { showIcon: true, showLabel: false, style: { backgroundColor: '#000', borderTopLeftRadius: 40, borderTopRightRadius: 40, position: 'relative', zIndex: 2, marginTop: -48 } }