web-dev-qa-db-fra.com

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 le positionnement avec les paramètres hérités flexbox.

Avec le code suivant, cela donne quelque chose comme this .

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 en CSS et toutes les propriétés ne sont pas disponibles dans React-Native. Donc, toute aide est appréciée, merci :)

javascriptcssreact-native
71
ilansas

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

J'avais juste à ajouter left: 0, et top: 0, aux styles, et oui, je suis fatigué.

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

La première étape serait d'ajouter

position: 'absolute',

alors si vous voulez l’élément sur toute la 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 voulez positionner l'élément en haut, remplacez bottom: 0 par top: 0

48
Spark.Bao

Cette solution a fonctionné pour moi:

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