Absolute et Flexbox dans React Native

95

Je voudrais mettre une barre blanche qui prendrait toute la largeur en bas de l'écran. Pour ce faire, j'ai pensé à utiliser le absolutepositionnement avec les flexboxparamètres hérités .

Avec le code suivant, il rend quelque chose comme ça .

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

Je suis nouveau dans le style CSS et toutes les propriétés ne sont pas disponibles dans React-Native. Donc, toute aide est appréciée, merci :)

javascript css react-native ilansas
la source

Réponses:

157

Ok, résolu mon problème, si quelqu'un passe, voici la réponse:

Je devais juste ajouter left: 0,et top: 0,aux styles, et oui, je suis fatigué.

position: 'absolute',
left:     0,
top:      0,
ilansas
la source
10
Merci d'avoir publié ça. Et il en va de même pour la hauteur - au lieu de height:100%faire top:0, bottom:0.
Premasagar
4
mais si vous voulez mettre la barre en bas et en pleine largeur, vous devez ajouter left:0, right:0, et ne pas ajouter top:0, si vous définissez top:0et bottom:0, elle affichera en plein écran.
Spark.Bao
1
Comment puis-je centrer? Par exemple, je veux afficher un spinner au-dessus de mon composant et je veux que le spinner soit absolu et centré?
Murat Ozgul
1
Pour remplir tout l'espace verticalement avec un enfant positionné en absolu en ajoutant top:0et bottom:0en remplaçant `` hauteur: 100% ", prenez @Premasagar
Nick Pineda
1
Ajouter cogens left, top, rightet bottonà 0 et fonctionne parfaitement.
jose920405
64

La première étape serait d'ajouter

position: 'absolute',

puis si vous voulez que l'élément pleine largeur, ajoutez 

left: 0,
right: 0,

puis, si vous voulez mettre l'élément en bas, ajoutez

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

si vous souhaitez positionner l'élément en haut, remplacez-le bottom: 0partop: 0

Spark.Bao
la source
4

Cette solution a fonctionné pour moi:

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