Absoluto e Flexbox no React Native

99

Eu gostaria de colocar uma barra branca que ocupasse toda a largura na parte inferior da tela. Para isso, pensei em usar o absoluteposicionamento com os flexboxparâmetros herdados .

Com o seguinte código torna algo como este .

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'
  },
});

Eu sou novo em estilo em CSS e nem todas as propriedades estão disponíveis no React-Native. Portanto, qualquer ajuda é apreciada, obrigado :)

javascript css react-native ilansas
fonte

Respostas:

163

Ok, resolveu meu problema, se alguém está passando aqui fica a resposta:

Só tive que adicionar left: 0,e top: 0,aos estilos, e sim, estou cansado.

position: 'absolute',
left:     0,
top:      0,
ilansas
fonte
10
Obrigado por postar isso. E parece o mesmo para altura - em vez de height:100%, faça top:0, bottom:0.
Premasagar
4
mas se você quiser colocar a barra na parte inferior, e largura total, você deve adicionar left:0, right:0, e não deve adicionar top:0, se definir top:0e bottom:0, ele exibirá em tela inteira.
Spark.Bao
1
Como posso centralizar? Por exemplo, eu quero mostrar um spinner no topo do meu componente e quero que o spinner seja absoluto e centralizado?
Murat Ozgul
1
Para preencher todo o espaço verticalmente com uma criança posicionada em absoluto adicionando top:0e bottom:0trabalhando em substituição a `` altura: 100% "leve para @Premasagar
Nick Pineda
1
Jus add left, top, righte bottona 0 e funciona perfeito.
jose920405
65

O primeiro passo seria adicionar

position: 'absolute',

então, se você quiser a largura total do elemento, adicione 

left: 0,
right: 0,

então, se você quiser colocar o elemento na parte inferior, adicione

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

se você quiser posicionar o elemento no topo, substitua bottom: 0portop: 0

Spark.Bao
fonte
4

Esta solução funcionou para mim:

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