Absolute e Flexbox in React Native

Question

Vorrei mettere una barra bianca che occupasse tutta la larghezza nella parte inferiore dello schermo. Per farlo ho pensato di utilizzare il posizionamento absolute con i parametri ereditati flexbox.

Con il seguente codice restituisce qualcosa come this.

Ecco il mio codice:

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

Sono nuovo in stile in CSS e non tutte le proprietà sono disponibili in React-nativo. Quindi, ogni aiuto è apprezzato, grazie :)

Answer 1

Ok, risolto il mio problema, se qualcuno sta passando ecco la risposta:

solo dovuto aggiungere left: 0, e top: 0, agli stili, e sì, sto stanco.

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

Answer 2

Il primo passo sarebbe quello di aggiungere

position: 'absolute', 

quindi se si desidera che l'intera larghezza dell'elemento, aggiungi

left: 0, 
right: 0, 

poi, se si vuole mettere l'elemento in basso , aggiungi

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

se vuoi per posizionare l'elemento in alto, sostituire bottom: 0 da top: 0

Answer 3

Questa soluzione ha funzionato per me:

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