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:)

Author: Anil, 2015-04-09

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