Pourquoi React Native ne propose-t-il pas un justify-self ?

Question

Je souhaite aligner un élément sur l'axe primaire. Par exemple, je veux avoir une ligne avec quelques enfants tous alignés à gauche, puis un enfant aligné sur le côté droit.

On peut obtenir cet effet avec quelque chose comme "position : absolute ; right : 0", mais je me demande s'il n'y a pas un meilleur moyen. Il semble qu'il devrait y avoir une fonction justifySelf qui ne concerne qu'un seul enfant et affecte son alignement sur l'axe primaire, de la même manière que la propriété alignSelf affecte l'alignement d'un enfant sur l'axe secondaire.

Pourtant, aucun justifySelf semble exister. Comment cela se fait-il ?

Elle est similaire à cette question, mais pas tout à fait : Comment faire flotter : right dans React Native ?

Answer 1

Je ne sais pas Réagir Natif, mais je ne sais flexbox!

Utilisez le code suivant comme guide:

<div style="display: flex;">

  <div>
    I'll be on the left side
  </div>
  <div>
    I'll be hugging the guy on the left side
  </div>
  <div>
    I'll be hugging the guy hugging the guy on the left side
  </div>
  <div style="margin-left: auto;">
    I'll be hugging the right side far away from those other guys
  </div>

</div>

La marge fixée sur le dernier enfant va pousser tous les autres enfants vers la gauche aussi loin que leurs styles permettra à, et de pousser autant droit que les autres styles de permettra.

Vous pouvez tester cela en ajoutant margin-right: auto; pour le dernier enfant, et vous verrez que le dernier enfant centré parfaitement dans le reste de l'espace de la div parent, après les trois premiers enfants de prendre leur espace imparti. C'est parce que la concurrence "marge autos" permettra à la fois de partager équitablement quel que soit l'espace reste, puisqu'ils ne peuvent pas annuler les uns les autres et de ne pas s'écraser les unes les autres.

Flex zone a été conçu pour gérer l'espacement de marge, donc, d'en profiter, ainsi que les autres unique de l'espacement des options disponibles en vertu de l' justify-content de la propriété.

Article utile: https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6

Answer 2

Je crois que vous voulez arriver à quelque chose comme cela :

Vous pouvez mettre cela en œuvre en imbriquant les vues qui partagent la même justifyContent propriété.

  <View style={{
    flex: 1,
    flexDirection: 'column',
    justifyContent: 'space-between',
  }}>
    <View>
      <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
      <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
    </View>
    <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
  </View>

Answer 3

Une réponse partielle : il n'y a pas de justifySelf dans React Native parce qu'il n'y a pas de justify-self pour le flexbox dans le vrai CSS. Il y a es a justify-self mais elle ne sert à rien dans les mises en page flexbox. Vous pouvez voir dans la spécification à https://drafts.csswg.org/css-align-3/#overview que justify-self est défini pour s'appliquer :

les cases au niveau du bloc, les cases positionnées de manière absolue et les éléments de la grille

qui n'inclut notamment pas les "articles flexibles".

D'accord, mais pourquoi est-ce le cas en CSS ? MDN propose une explication que vous pouvez ou non trouver satisfaisante :

Il n'y a pas de justify-self dans Flexbox

Sur l'axe principal, Flexbox traite notre contenu en tant que groupe. La quantité d'espace nécessaire à la disposition des éléments est calculée, et l'espace restant est alors disponible pour la distribution. L'espace restant est alors disponible pour la distribution. justify-content contrôle l'utilisation de l'espace restant. Définir justify-content: flex-end et l'espace supplémentaire est placé avant les éléments, justify-content: space-around et il est placé de part et d'autre de l'article dans cette dimension, etc.

Cela signifie qu'un justify-self n'a pas de sens dans Flexbox, car il s'agit toujours de déplacer l'ensemble du groupe d'éléments.

Sur l'axe transversal align-self est logique, car nous disposons potentiellement d'un espace supplémentaire dans le conteneur flexible dans cette dimension, dans lequel un seul élément peut être déplacé au début et à la fin.

Il y a manifestement un sens à cela. Il est toujours utile et cohérent de mettre en place des alignSelf: 'center' sur un élément flexible pour demander qu'il soit centré sur l'axe transversal. Mais que signifierait, par exemple, le fait de mettre justifySelf: 'center' sur un élément flexible, pour demander qu'il soit centré sur l'axe principal ? Comment cela est-il censé être géré si les éléments flexibles précédents ont déjà rempli plus de la moitié de l'espace le long de cet axe ?

Les marges constituent une bonne solution pour des cas comme le vôtre. justifySelf en revanche, ne peut raisonnablement pas exister pour flexbox, parce que l'élément justifyContent Les valeurs spécifient comment distribuer Un peu de réflexion sur ce que cela signifierait de les appliquer plutôt à des éléments spécifiés individuellement révèle que cela est fondamentalement incohérent.

Answer 4

Il existe un moyen simple d'effectuer cette opération sans positionnement absolu, qui fonctionne exactement comme vous l'attendez : tous les éléments de différentes hauteurs s'alignent sur l'axe des ordonnées de manière appropriée.

<View style={{ flexDirection: 'row', alignItems: 'center' }}>
  <View style={{ backgroundColor: 'green', height: 50, width: 50 }} />
  <Text style={{flex: 1}}> text in here because why not!</Text>
  <View style={{ backgroundColor: 'yellow', width: 30, height: 30 }} />
</View>

Answer 5

Vous pouvez consulter Flex Docs !

L'ajout de la fonction flexDirection au style d'un composant détermine l'orientation de la fonction axe principal de son agencement.

et ensuite :

L'ajout de alignItems au style d'un composant détermine l'alignement des enfants le long de la ligne de base. axe secondaire (si l'axe primaire est la ligne, l'axe secondaire est la colonne, et vice versa).

Le code souhaité sera donc :

import React, { Component } from 'react';
import { AppRegistry, View } from 'react-native';

export default class AlignItemsBasics extends Component {
  render() {
    return (
      <View style={{
        flex: 1,
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
      }}>
        <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
        <View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
      </View>
    );
  }
};

// skip this line if using Create React Native App
AppRegistry.registerComponent('AwesomeProject', () => AlignItemsBasics);

MISE À JOUR

Si vous voulez dire quelque chose comme cette image :

Je vous propose donc ceci :

import React, { Component } from "react";
import { View, StyleSheet } from "react-native";

class Playground extends Component {
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.boxes} />
        <View style={styles.boxes} />
        <View
          style={[
            styles.boxes,
            {
              backgroundColor: "crimson",
              position: "absolute",
              right: 0
            }
          ]}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    flexDirection: "row",
    justifyContent: "flex-start",
    alignItems: "center"
  },
  boxes: {
    width: 50,
    height: 50,
    marginLeft: 1, // to separate each box!
    backgroundColor: "steelblue"
  }
});

export default Playground;

Pour autant que je sache, avec ces accessoires C'est la meilleure façon de procéder !