Absolute et Flexbox dans React Native

Je voudrais mettre une barre blanche qui prendrait toute la largeur au bas de l’écran. Pour ce faire, j’ai pensé à utiliser absolute positionnement absolute avec les parameters flexbox hérités.

Avec le code qui suit, cela rend quelque chose comme ça .

Voici mon code:

 var NavigationBar = React.createClass({ render: function() { return(  //Icon 1, Icon 2...  ); } }); var Main = React.createClass({ render: function() { return(    ); } }); 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 🙂

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

Il fallait juste append à left: 0, et top: 0, aux styles, et oui, je suis fatigué.

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

La première étape serait d’append

 position: 'absolute', 

alors si vous voulez l’élément pleine largeur, ajoutez

 left: 0, right: 0, 

alors, 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 en bottom: 0 par en top: 0

Cette solution a fonctionné pour moi:

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