Absolut und Flexbox in React Native


90

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

Antworten:


151

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,

10
Danke, dass du das gepostet hast. Und es scheint auch für die Höhe - statt zu height:100%tun top:0, bottom:0.
Premasagar

4
Wenn Sie jedoch die Leiste unten und in voller Breite platzieren möchten, sollten Sie hinzufügen left:0, right:0und nicht hinzufügen top:0, wenn Sie top:0und festlegen bottom:0, wird der Vollbildmodus angezeigt.
Spark.Bao

1
Wie kann ich zentrieren? Zum Beispiel möchte ich einen Spinner über meiner Komponente anzeigen und möchte, dass der Spinner absolut und zentriert ist?
Murat Ozgul

1
Alle den Raumes vertikal mit absolutem positionierter Kind Zugabe zum Füllen top:0und bottom:0100%“, um @Premasagar: als Ersatz für` `Höhe gearbeitet
Nick Pineda

1
Jus add left, top, rightund bottonauf 0 und funktioniert perfekt.
Jose920405

61

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


3

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
      }
  }
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.