ios - 我们可以在 react-native 中设置组件的内容优先级吗？

Question

在 AutoLayout 中，我们可以根据约束排列多个 View ，例如，如果我有一个 UILabel 和一个 UIImageView 位于一行中，我可以这样做:

UILable *label = [UILabel new];
UIImageView *imageView = [UIImageView new];
[self.view addSubview:label];
[self.view addSubview:imageView];

[label mas_makeConstraints:^(MASConstraintMaker *make) {
    make.left.bottom.top.equalTo(self.view);
    make.right.equalTo(imageView.mas_left);
}];

[imageView mas_makeConstraints:^(MASConstraintMaker *make) {
    make.right.bottom.top.equalTo(self.view);
}];

现在，如果我想保持 label 的内容不被压缩，传统的 AutoLayout 方式是将 label 的 contentCompressionResistancePriority 设置得更高，然后布局系统将保持内容label的宽度不被压缩，如果水平轴上的剩余空间不够，imageView的宽度将被压缩。所有这些都基于 content size，或 intrinsicContentSize 精确地。

继续，我将在 JS 中重新实现一个原生自定义 View ，它使用 intrinsicContentSize 属性来计算它是否应该完全显示其内容。自定义 View 的目标是水平并排显示多个标签，在我的 native 实现中，我将检查 layoutSubviews 方法中每个 subview 的边界是否超出其父 View :

-(void)layoutSubviews {
    [super layoutSubviews];
    CGFloat width = 0;    
    bool update = NO;

    for(UIView * subview in self.subviews) {
        if(subview.frame.origin.x + subview.width > self.width) {
            subview.hidden = YES;
            update = YES;
        } else {
            subview.hidden = NO;
            width = subview.origin.x + subview.width;
        }
    }

    if(update) {
        self.fitSize = CGSizeMake(width, self.fitSize.height);
        [self invalidateIntrinsicContentSize];    //in intrinsicContentSize method, return self.fitSize
    }
}

现在 AutoLayout 知道 View 的真实大小，它会根据 View 的真实大小进行布局。我也想使用 native react 来实现这一点，但我发现我无法像使用基于约束的 AutoLayout 一样设置两个组件之间的关系，也无法重写 intrinsicContentSize 方法来计算 View 的实际大小我想要它，这个用例有什么解决方案吗？

Answer 1

React Native 使用 the CSS Flexbox布局它的 View 。这与 UIStackView 非常相似；换句话说，您在问题中要求的所有内容都与布局 React Native View 真正相关!

最好的描述方式是将它与 iOS 9 的 UIStackView 进行比较。如果您对此不熟悉，我强烈建议您check out this tutorial一旦您熟悉了 UIStackView，将这些知识与 Flexbox 联系起来就轻而易举了。

在 React Native 中，您使用 StyleSheet 来定义 View 的布局。考虑以下样式:

const styles = React.StyleSheet.create({
  container: {
    flexDirection: "vertical",
    flex: 1,
  }
})

此 container 样式本质上是定义一个 UIStackView，其项目垂直对齐。

flex 值的存在表示容器中的元素将引用它们自己的 flex 值来确定内容拥抱优先级。

这是关键。正如您所提到的，可以通过操纵它如何解释每个 View 的固有内容大小来完全操纵 React Native 的布局。

考虑以下布局:

让我们关注底部的标签栏。假设选项卡栏本身具有上述 container 样式的样式(带有 flexDirection: "horizo​​ntal")。

要在 React Native 中实现这种布局，需要为所有的子元素指定一个 flex 值。 flex 值越高，与它的 sibling 相比，它拥有的较少 内容拥抱优先级。换句话说，1 个兄弟的 flex 值越高，对所有其他具有较低 flex 值的兄弟强制执行更高的内容拥抱优先级。

因此，布局样式表可能如下所示:

const styles = React.StyleSheet.create({
  //flex box containing the child elements
  container: {
    flexDirection: "horizontal",
    flex: 1
  },

  //the three child elements nested inside the container
  plusButton: {
    flex: 1
  },
  chooseSourcePlaylistButton: {
    flex: 2
  },
  settingsButton: {
    flex: 1
  },
})

因为您希望中间 View 展开并将其他元素推到边缘，所以您希望它通过赋予更大的 flex 值来支配 flex box。