Absolute e Flexbox in React Native

Vorrei inserire una barra bianca che occupi tutta la larghezza nella parte inferiore dello schermo. Per farlo ho pensato di utilizzare il absoluteposizionamento con i flexboxparametri ereditati .

Con il seguente codice rende qualcosa di simile a questo .

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 nello stile in CSS e non tutte le proprietà sono disponibili in React-Native. Quindi qualsiasi aiuto è apprezzato, grazie :)

javascript css react-native

— ilansas
fonte

Risposte:

157

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

Dovevo solo aggiungere left: 0,e top: 0,agli stili, e sì, sono stanco.

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

— ilansas
fonte

Grazie per averlo postato. E sembra lo stesso per l'altezza - invece di height:100%farlo top:0, bottom:0.

— Premasagar

ma se vuoi mettere la barra in basso, a tutta larghezza, dovresti aggiungere left:0, right:0, e non dovresti aggiungere top:0, se imposti top:0e bottom:0, verrà visualizzato a schermo intero.

— Spark.Bao

Come posso centrare? Ad esempio, voglio mostrare uno spinner sopra il mio componente e voglio che lo spinner sia assoluto e centrato?

— Murat Ozgul

Per riempire tutto lo spazio verticalmente con un bambino in posizione assoluta che aggiunge top:0e ha bottom:0lavorato in sostituzione di `` altezza: 100% ", porta a @Premasagar

— Nick Pineda

Jus add left, top, righted bottona 0 e funziona perfettamente.

— jose920405

Il primo passo sarebbe aggiungere

position: 'absolute',

quindi se vuoi l'elemento a tutta larghezza, aggiungi

left: 0,
right: 0,

quindi, se vuoi mettere l'elemento in fondo, aggiungi

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

se vuoi posizionare l'elemento in alto, sostituisci bottom: 0contop: 0

— Spark.Bao
fonte

Questa soluzione ha funzionato per me:

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

— Alex
fonte