Absolut und Flexbox in React Native

Ich möchte einen weißen Balken einfügen, der die gesamte Breite am unteren Bildschirmrand einnimmt. Dazu habe ich überlegt, die absolutePositionierung mit den geerbten flexboxParametern zu verwenden.

Mit dem folgenden Code macht es so etwas wie diese .

Hier ist mein Code:

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

Ich bin neu im Styling in CSS und nicht alle Eigenschaften sind in React-Native verfügbar. Also jede Hilfe ist dankbar, danke :)

Ok, mein Problem gelöst, wenn hier jemand vorbeikommt, ist die Antwort:

Musste nur left: 0,und top: 0,zu den Stilen hinzufügen , und ja, ich bin müde.

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

Der erste Schritt wäre das Hinzufügen

position: 'absolute',

Wenn Sie dann das Element in voller Breite haben möchten, fügen Sie hinzu

left: 0,
right: 0,

Wenn Sie das Element dann unten platzieren möchten, fügen Sie hinzu

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

Wenn Sie das Element oben positionieren möchten, ersetzen Sie es bottom: 0durchtop: 0

Diese Lösung hat bei mir funktioniert:

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