为什么 React Native 不提供 justify-self

Question

我想在主轴上对齐一个项目。例如，我想让一行有几个孩子都向左对齐，然后一个孩子在右侧对齐。

您可以使用“位置：绝对；正确：0”之类的内容来实现该效果，但我想知道是否有更好的方法。似乎应该有一个justifySelf 属性，它只影响一个孩子并影响其在主轴上的对齐方式，就像alignSelf 影响一个孩子在辅助轴上的对齐方式一样。

但似乎不存在这样的justifySelf。这是为什么呢？

与这个问题类似但不完全是：How can you float: right in React Native?

Answer 1

我不知道 React Native，但我知道 flexbox！

使用以下代码作为指导：

<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>

在最后一个子元素上设置的边距会将所有其他子元素向左推到他们的样式允许的范围内，并在任何其他样式允许的范围内将自身推到最右边。

您可以通过将margin-right: auto; 也添加到最后一个孩子来测试这一点，在前三个孩子占用分配的空间后，您将看到最后一个孩子完全居中在父 div 的剩余空间中。这是因为相互竞争的“margin autos”将平等地共享任何剩余空间，因为它们不能相互抵消，也不会相互覆盖。

Flex 盒子被设计用来处理这样的边距间距，因此请充分利用它，以及 justify-content 属性下可用的其他独特间距选项。

有用的文章：https://hackernoon.com/flexbox-s-best-kept-secret-bd3d892826b6

Answer 2

我相信你想要实现这样的目标：

您可以通过嵌套共享相同justifyContent 属性的视图来实现这一点。

  <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

部分答案：在 React Native 中没有 justifySelf，因为在真正的 CSS 中没有用于 flexbox 的 justify-self。 有一个 justify-self CSS 属性，但它在 flexbox 布局中没有任何作用。您可以在 https://drafts.csswg.org/css-align-3/#overview 的规范中看到 justify-self 被定义为适用于：

块级框、绝对定位框和网格项

其中明显不包括“弹性项目”。

好的，但为什么在 CSS 中会出现这种情况？ MDN 提供了an explanation，您可能觉得满意，也可能不满意：

Flexbox 中没有 justify-self

在主轴上，Flexbox 将我们的内容作为一个组来处理。计算布置项目所需的空间量，然后剩余空间可用于分配。 justify-content 属性控制剩余空间的使用方式。设置justify-content: flex-end 并将多余的空间放置在项目之前，justify-content: space-around 并将其放置在该维度中项目的任一侧，等等。

这意味着 justify-self 属性在 Flexbox 中没有意义，因为我们总是在处理移动整个项目组。

在交叉轴上align-self 是有意义的，因为我们可能在该维度的弹性容器中有额外的空间，其中单个项目可以移动到开始和结束。

这显然是有道理的。将alignSelf: 'center' 放在弹性项目上以要求它在横轴上居中总是有意义且连贯的。但是，例如，将justifySelf: 'center' 放在一个弹性项目上，要求它以主轴为中心，这意味着什么？如果之前的 flex 项已经填充了该轴上一半以上的空间，应该如何处理？

边距为像您这样的情况提供了很好的解决方案。另一方面，justifySelf 不能合理地存在于 flexbox 中，因为 justifyContent 值指定了如何分发 flex 项目，并且稍微考虑了一下应用它们意味着什么单独指定的项目表明这样做基本上是不连贯的。

Answer 4

有一种简单的方法可以在没有绝对定位的情况下执行此操作，该方法完全符合您的预期，所有不同高度的项目都在 y 轴上适当地排列。

<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

你可以看看Flex Docs！

为组件的样式添加 flexDirection 决定了其布局的主轴。

然后：

将 alignItems 添加到组件的样式确定子级沿次轴的对齐方式（如果主轴是行，则次轴是列，反之亦然）。

所以你想要的代码是：

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);

更新

如果你的意思是这样的图片：

那么我会建议你这样做：

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;

据我所知these props，这是最好的方法！

Answer 6

我真的认为解决此问题的最佳方法是将您在<View> 中显示的任何内容用position: "absolute" 包装起来，并将position: "absolute" 添加到您想要的元素中。然后，在<View> 中，添加justifyContent: "center", 和alignItems: "center"。希望这能解决问题。