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

ilansas
quelle

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,
ilansas
quelle
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

Spark.Bao
quelle
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
      }
  }
Alex
quelle