Absolute y Flexbox en React Native

95

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 absoluteposicionamiento con los flexboxparámetros heredados .

Con el siguiente código, 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 estilo en CSS y no todas las propiedades están disponibles en React-Native. Así que se agradece cualquier ayuda, gracias :)

javascript css react-native ilansas
fuente

Respuestas:

157

Ok, resuelto mi problema, si alguien pasa por aquí está 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,
ilansas
fuente
10
Gracias por publicar eso. Y lo mismo parece para la altura, en lugar de height:100%hacerlo top:0, bottom:0.
Premasagar
4
pero si desea colocar la barra en la parte inferior y el ancho completo, debe agregar left:0, right:0, y no debe agregar top:0, si establece top:0y bottom:0, se mostrará a pantalla completa.
Spark.Bao
1
¿Cómo puedo centrar? Por ejemplo, quiero mostrar una ruleta en la parte superior de mi componente y quiero que la ruleta sea absoluta y centrada.
Murat Ozgul
1
Para llenar todo el espacio verticalmente con un niño en posición absoluta agregando top:0y bottom:0trabajado como reemplazo de "altura: 100%", lleve a @Premasagar
Nick Pineda
1
Agregar jugo left, top, righty bottona 0 y funciona perfecto.
jose920405
64

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, reemplácelo bottom: 0portop: 0

Spark.Bao
fuente
4

Esta solución funcionó para mí:

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